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内 容 简 介 


本 书 以 Vue. js 2 为 基础 ， 以 项 目 实战 的 方式 来 引导 读者 渐进 式 学 习 Vue. js。 本 书 分 为 基础 篇 、 进 阶 篇 
和 实战 篇 三 部 分 。 基 础 篇 主要 是 对 Vue. js 核心 功能 的 介绍 ， 进 阶 篇 主要 讲解 前 端 工程 化 Vue. js 的 组 件 化 、 
插件 的 使 用 ; 实战 骗 着 重 开发 了 两 个 完整 的 示例 ， 所 涉及 的 内 容 涵 盖 Vue. js 绝 大 部 分 API。 通 过 阅读 本 书 ， 
读者 能 够 掌握 Vue. js 框架 主要 API 的 使 用 方法 、 自 定义 指令 、 组 件 开 发 、 单 文件 组 件 、Render 函数 、 使 用 
webpack 开发 可 复 用 的 单 页 面 富 应 用 等 。 

本 书 示例 丰富 、 侧 重 实战 ， 适 用 于 刚 接触 或 即将 接触 Vue. js 的 开发 者 ， 也 适用 于 对 Vue. js 有 过 开发 经 
验 ， 但 需要 进一步 提升 的 开发 者 。 
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在 撰写 Vue 文档 的 过 程 中 ， 出 于 篇 幅 和 精力 的 限制 ， 主 要 着 力 于 对 Vue ARE 
API 的 解释 。 对 于 缺乏 实战 经 验 的 读者 来 说 ， 虽 然 可 能 明白 了 API 的 用 法 ， 但 对 
于 如 何 将 它 使 用 在 实际 项 目 中 仍然 会 感到 困惑 。 而 这 本 书 的 优点 ， 正 是 在 于 对 重 
要 的 知识 点 结合 了 一 些 实战 范例 来 帮助 读者 更 好 地 理解 API VETERES SI SERVE HH 
景 ， 并 且 在 GitHub 有 对 应 的 源码 可 以 下 载 研究 。 

本 书 的 作者 梁 涉 是 优秀 的 开源 Vue 组 件 库 iView 的 作者 , 也 为 Vue 社区 的 活 
跃 做 出 了 很 多 页 献 。 同 时 ， 对 开源 的 投入 也 使 得 他 对 Vue 的 设计 和 底层 实现 有 相 
当 深 入 的 理解 。 

如 果 你 喜欢 通过 实例 来 学 习 ， 那 么 这 本 书 会 是 你 上 手 Vue 的 一 个 好 选择 。 
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两 年 前 ， 我 开始 接触 Vue js 框架 ， 当 时 就 被 它 的 轻 量 、 组 件 化 和 友好 的 API 
所 吸引 。 之 后 我 将 Vue.js 和 webpack 技术 栈 引 入 我 的 公司 (TalkingData) 可 视 化 
团队 ， 并 经 过 一 年 多 的 实践 ， 现 已 成 为 整个 公司 的 前 端 开 发 规范 。 

与 此 同时 ， 我 开源 了 iView 项 目 ， 它 是 基于 Vuejs 的 一 套 高 质量 UI 组 件 
库 ， 从 设计 规范 、 工 程 构 建 到 国际 化 都 提供 了 完整 的 解决 方案 ， 并 文 持 SSR。 在 
许多 志愿 者 的 帮助 下 ， 将 文档 全 部 翻译 为 英文 ， 在 Vue 开发 者 社区 鼎 受 欢迎 。 

如 今 ， 前 问 框 架 可 谓 百 家 和 争鸣， 但 每 一 个 框架 的 产生 都 是 为 了 解决 具体 问题 
Hj. Vuejs 以 渐进 式 切 入 ， 对 不 同 阶段 的 开发 者 提供 了 不 同 的 开发 模式 ， 由 浅 入 
IRo Vuejs 提供 了 友好 的 API 和 强大 的 功能 ， 包 括 双 同 数据 绑 定 、 路 由 、 状 态 管 
理 、 动 男 、 组 件 化 、SSR， 无 论 是 简单 的 页 面 还 是 复杂 的 系统 ， 从 可 复 用 性 、 便 
捷 性 和 维护 性 上 都 精益 求 精 。 

有 幸 完 成 此 书 ， 希 望 能 给 Vuejs 社区 带 来 一 点 帮助 。 


UE (Aresn) 
2017 年 7 月 10 H 


关于 本 书 


本 书 分 为 “基础 篇 ”“ 进 阶 篇 ”和 “实战 篇 ”三 部 分 ， 其 中 基础 篇 涵盖 了 Vue.js 2 的 所 有 
基础 内 容 ， 包 括 : 
双向 绑 定 数据 ; 
计算 属性 ; 
内 置 指 令 与 自 定 义 指令 ; 
组 件 。 
基础 篇 内 容 相 对 容易 ， 适 合 刚 入 门 Vue.js 的 开发 者 。 
进 阶 篇 更 深入 Vuejs 的 工程 化 ， 内 容 包 括 : 
e Render 函数 ; 
e  webpack 的 使 用 ; 
。 Vuejs 插件 。 
实战 篇 首先 剖析 了 iView 的 两 个 经 典 组 件 的 设计 和 实现 思路 ， 然 后 充分 利用 Vuejs 的 内 
容 完成 了 两 个 完整 的 实战 项 目 。 


本 书 读者 对 象 


本 书 基础 内 容 和 实战 项 目 共 存 ， 适 用 于 刚 接触 Vue.js 的 前 端 或 后 端 开 发 者 。 当 然 ， 有 一 
E Vue.js 开发 经 验 的 读者 也 能 从 中 收获 不 少 实战 中 的 经 验 。 

本 书 要 求 读者 有 一 定 的 JavaScript 编程 能 力 ， 并 假定 读者 已 经 掌握 了 HTML 和 CSS, F 
则 阅读 本 书 会 有 一 定 的 难度 。 


其 他 说 明 


本 书 基础 篇 示例 只 需要 有 编辑 器 和 浏览 右 两 个 环境 即 可 , 浏览 器 以 Chrome 最 佳 , 如 果 是 
IE, PDE IE 9 版 本 以 上 。 进 阶 篇 和 实战 篇 的 示例 需要 读者 了 解 并 安装 Node.js 和 NPM， 本 
书 将 不 会 介绍 它们 的 安装 方法 。 

本 书 相 关 的 示例 代码 都 放 在 GitHub， 网 址 如 下 : 

https://github.com/icarusion/vue-book 


读者 可 到 该 项 目的 issues 讨论 区 提问 讨论 。 
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基础 篇 将 循序 渐进 地 介绍 Vuejs 的 核心 功能 ， 包 括 数据 的 双向 绑 定 、 计 算 属 性 、 基 本 指令 、 
自 定义 指令 及 组 件 等 。 通 过 对 基础 篇 的 学 习 ， 可 以 快速 构建 出 Vuejs 应 用 并 直接 用 于 生产 环境 。 


初 识 Vue.js 


本 章 主 要 介绍 与 Vuejs 有 关 的 一 些 概念 与 技术 ， 并 帮助 你 了 解 它们 背后 相关 的 工作 原理 。 通 
过 对 本 章 的 学 习 ， 即 使 从 未 接触 过 Vuejs， 你 也 可 以 运用 这 些 知识 点 快速 构建 出 一 个 Vuejjs 应 用 。 


1.14 Vue.js 是 什么 


Vue.js 的 官方 文档 中 是 这 样 介绍 它 的 。 

简单 小 巧 的 核心 ， 渐 进 式 技术 栈 ， 足 以 应 付 任 何 规模 的 应 用 。 

简单 小 巧 是 指 Vuejs 压缩 后 大 小 仅 有 17KB。 所 谓 渐进 式 (Progressive) ， 就 是 你 可 以 一 步 一 
步 、 有 阶段 性 地 来 使 用 Vue.js， 不 必 一 开始 就 使 用 所 有 的 东西 。 随 着 本 书 的 不 断 介绍 ， 你 会 深刻 感 
受到 这 一 点 ， 这 也 正 是 开发 者 热爱 Vuejjs 的 主要 原因 之 一 。 

使 用 Vue.js 可 以 让 Web 开发 变 得 简单 ,同时 也 颠 履 了 传统 前 端 开发 模式 。 它 提供 了 现代 Web 
开发 中 常见 的 高 级 功能 ， 比 如 : 


e 


解 耦 视图 与 数据 。 

可 复 用 的 组 件 。 

前 端 路 由 。 

状态 管理 。 

虚拟 DOM (Virtual DOM ) 。 


MVVM 模式 


与 知名 前 端 框架 Angular, Ember 等 一 样 ，Vue.js 在 设计 上 也 使 用 MVVM (Model-View-View 
Model) 模式 。 


4 第 1 篇 基础 篇 


MVVM 模式 是 由 经 典 的 软件 架构 MVC 衍生 来 的 。 当 View HWRE) 变化 时 ， 会 自动 更 新 到 
ViewModel (视图 模型 ) ， 反 之 亦 然 。View 和 ViewModel 之 间 通 过 双向 绑 定 〈data-binding) 建立 
联系 ， 如 图 1-1 所 示 。 






DataBinding 


ViewModel 


图 1-1 MVVM 关系 
1.1.2 Vue.js 有 什么 不 同 


如 条 你 使 用 过 jQuery, 那 你 一 定 对 操作 DOM、 绑 定 事 件 等 这 些 原生 JavaScript 能 力 非常 熟悉 ， 
比如 我 们 在 指定 DOM 中 插入 一 个 元 素 ， 并 给 它 绑 定 一 个 点 击 事件 : 


if (showBtn) { 
var btn = $('«button»Click mec/button»'); 
btn.on('click', function i) 1| 
console.log('Clicked!'"); 
)); 
$ ('tapp') .append (btn) ; 
} 


这 段 代码 不 难 理解 ， 操 作 的 内 容 也 不 复杂 ， 不 过 这 样 让 我 们 的 视图 代码 和 业务 逻辑 紧 耦 合 在 
一 起 ， 随 着 功能 不 断 增 加 ， 直 接 操作 DOM 会 使 得 代码 越 来 越 难 以 维护 。 

而 Vue.js 通过 MVVM 的 模式 拆 分 为 视图 与 数据 两 部 分 ， 并 将 其 分 离 。 因 此 ， 你 只 需要 关心 你 
的 数据 即 可 ，DOM 的 事情 Vue 会 帮 你 上 自动 搞定 ， 比 如 上 面 的 示例 用 Vue.js 可 以 改写 为 : 


«body» 
«div id-"app"» 
«button v-if-"showBtn" v-on:click-"handleClick"»Click me«c/button» 
«/div» 
«/body» 
«script» 
new Vue({ 
el: '#app', 
data: { 
showBtn: true 


), 
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methods: { 
handleClick: function () { 
console.log('Clicked!'); 
} 
} 
)) 
«/script» 


暂时 还 不 需要 理解 上 述 代 码 ， 这 里 只 是 快速 展示 Vuejs 的 写法 ， 在 后 面 的 章节 会 详细 
jg m 介绍 每 个 参数 的 用 法 。 


1.2 如何 使 用 Vue.js 


每 一 个 框架 的 产生 都 是 为 了 解决 某 个 具体 的 问题 。 在 正式 开始 学 习 Vuejs 前 ， 我 们 先 对 传统 
前 端 开发 模式 和 Vue.js 的 开发 模式 做 一 个 对 比 ， 以 此 了 解 Vue.js 产生 的 背景 和 核心 思想 。 


1.2.1 ”传统 的 前 端 开发 模式 


前 端 技术 在 近 几 年 发 展 迅 速 ， 如 今 的 前 端 开 发 已 不 再 是 10 年 前 写 个 HTML 和 CSS 那样 简单 
了 ， 新 的 概念 层出不穷 ， 比 如 ECMAScript 6. Node.js, NPM, 前 端 工 程 化 等 。 这 些 新 东西 在 不 断 
优化 我 们 的 开发 模式 ， 改 变 我 们 的 编程 思想 。 

随 着 这 些 技 术 的 普及 ， 一 套 可 称 为 “万 金 油 ” 的 技术 栈 被 许多 商业 项 目 用 于 生产 环境 : 


jQuery + RequireJS (SeaJS) +artTemplate (doT) +Gulp (Grunt) 


这 套 技 术 栈 以 jQuery 为 核心 ， 能 兼容 绝 大 部 分 浏览 器 ， 这 是 很 多 企业 比较 关心 的 ， 因 为 他 们 
的 客户 很 可 能 还 在 用 IE7 及 以 下 浏览 器 。 使 用 RequireJS 或 SeaJS 进行 模块 化 开发 可 以 解决 代码 依 
赖 混乱 的 问题 ， 同 时 便于 维护 及 团队 协作 。 使 用 轻 量 级 的 前 端 模板 (如 doT) 可 以 将 数据 与 HTML 
模板 分 离 。 最 后 ， 使 用 自动 化 构建 工具 (如 Gulp) 可 以 合并 压缩 代码 ， 如 果 你 喜欢 写 Less. Sass 
以 及 现在 流行 的 ES 6， 也 可 以 帮 你 进行 预 编 译 。 

这 样 一 套 看 似 完 美 无 瑕 的 前 端 解决 方案 就 构成 了 我 们 所 说 的 传统 前 端 开 发 模式 ， 由 于 它 的 简 
单 、 高 效 、 实 用 ， 至 今 仍 有 不 少 开发 者 在 使 用 。 不 过 随 着 项 目的 扩大 和 时 间 的 推移 ， 出 现 了 更 复杂 
的 业务 场景 ， 比 如 SPA ( 单 页 面 富 应 用 ) 、 组 件 解 看 等 。 为 了 提升 开发 效率 ， 降 低 维 护 成 本 ， 传 
统 的 前 端 开 发 模式 已 不 能 完全 满足 我 们 的 需求 ， 这 时 就 出 现 了 如 Angular, React 以 及 我 们 要 介绍 
的 主角 Vue.js。 


1.22 ”Vue.js 的 开发 模式 


Vue.js 是 一 个 渐进 式 的 JavaScript 框架 ， 根 据 项 目 需 求 ， 你 可 以 选择 从 不 同 的 维度 来 使 用 它 。 
如 果 你 只 是 想 体 验 Vuejjs 带 来 的 快感 ， 或 者 开发 几 个 简单 的 HIML 5 页 面 或 小 应 用 ， 你 可 以 直接 
通过 script 加 载 CDN 文件 ， 例 如 : 
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<!-- 自动 识别 最 新 稳定 版 本 的 Vue.js --> 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
<!-- 指 定 某 个 具体 版 本 的 Vue .js --» 


«script src-"https://unpkg.com/vue802.1.6/dist/vue.min.js"»«/script» 


两 种 版 本 都 可 以 ， 如 果 你 不 太 了 解 各 版 本 的 差别 ， 建 议 直接 使 用 最 新 的 稳定 版 本 。 当 然 ， 你 
也 可 以 将 代码 下 载 下 来 ， 通 过 自己 的 相对 路 径 来 引用 。 引 入 Vuejjs 框架 后 ， 在 body RAME new 
Vue0 的 方式 创建 一 个 实例 ， 这 就 是 Vuejs 最 基本 的 开发 模式 。 现 在 可 以 写 入 以 下 完整 的 代码 来 快 


速 体验 Vue: 


<!DOCTYPE html» 
<html> 


<head> 


«meta charset-"utf-8"» 


«title»Vue 示例 </title> 


</head> 
<body> 
«div id="app"> 


<ul> 


«li v-for-"book in books">{{ book.name }}</li> 


«/ul» 


«/div» 


«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 


«script» 


new Vue(( 


el: '#app', 
data: { 
books: [ 
{ name: 
{ name: 
{ name: 
] 
} 
)) 
«/script» 
«/body» 
«/html» 


' (Vue.js 实战 》' }, 
' (JavaScript 语言 精粹 》' }, 
' (JavaScript 高 级 程序 设计 》' } 


在 浏览 器 中 访问 它 ， 会 将 图 书 列表 循环 显示 出 来 ， 如 图 1-2 所 示 。 

对 于 一 些 业 务 逻 辑 复 杂 , 对 前 端 工程 有 要 求 的 项 目 , 可 以 使 用 Vue 单 文 件 的 形式 配合 webpack 
使 用 ， 必 要 时 还 会 用 到 vuex 来 管理 状态 ，vue-router 来 管理 路 由 。 这 里 提 到 了 很 多 概念 ， 目 前 还 不 
必 去 过 多 了 解 ， 只 是 说 明 Vuejs 框架 的 开发 模式 多 样 化 ， 后 续 章 节 会 详细 介绍 ， 到 时 就 会 对 整个 


Vue 生态 有 所 了 解 了 。 
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e 《Vue.js 实 战 》 
e 《JavaScript 语 言 精粹 》 
。 《JavaScript 高 级 程序 设计 》 





图 1-2 Vuejs 示例 在 浏览 器 中 访问 的 效果 


THET Vuejs 的 开发 模式 后 ， 相 信 你 已 经 迫不及待 地 想 开 启 Vue 的 大 门 了 。 下 一 章 ， 我 们 就 
直接 进入 话题 ， 创 建 第 一 个 Vue 应 用 。 


数据 绑 定 和 第 一 个 Vue 应 


d 


学 习 任 何 一 种 框架 ， 从 一 个 Hello World 应 用 开始 是 最 快 了 解 该 框架 特性 的 途径 ， 我 们 先 从 一 
段 简 单 的 HTML 代码 开始 ， 感 受 Vue.js 最 核心 的 功能 。 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
«title»Vue 示例 </title> 
</head> 
<body> 
«div id-"app"» 
«input type-"text" v-model-"name" placeholder=" 你 的 名 字 "> 
<h1> 你 好 ，{{f name }}</h1> 
«/div» 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script» 
var app = new Vue(í 


el: '4app', 


data: { 
name: '"' 
} 
)) 
«/script» 
«/body» 


«/html» 
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这 是 一 段 简单 到 不 能 再 简单 的 代码 ， 但 却 展示 出 了 Vuejs 最 核心 的 功能 : 数据 的 双 回 绑 定 。 
在 输入 框 输入 的 内 容 会 实时 展示 在 页 面 的 hl 标签 内 ， 如 图 2-1 所 示 。 


eoe < file:///Users/aresn/Documen: 


Aresn 


你 好 ，Aresn 





2-1 展示 内 容 


从 本 章 开 始 , 示例 不 再 提供 完整 的 代码 , 而 是 根据 上 下 文 , 将 HTML 部 分 与 JavaScript 
d à 部 分 单独 展示 ， 省 略 了 head. body 等 标签 以 及 Vue.js 的 加 载 年 ， 读 者 可 根据 上 例 结构 
E 示 RRRA, 


2.1 Vue SAGE HE 


2.1.1 实例 与 数据 
Vue.js 应 用 的 创建 很 简单 ， 通 过 构造 函数 Vue 就 可 以 创建 一 个 Vue 的 根 实例 ， 并 启动 Vue 应 


var app = new Vue(í 
// 选 项 
)) 
变量 app 就 代表 了 这 个 Vue Xj :ESc 上， 几乎 所 有 的 代码 都 是 一 个 对 象 ， 写 入 Vue 实例 的 
选项 内 的 。 
首先 ， 必 不 可 少 的 一 个 选项 就 是 el。el 用 于 指定 一 个 页 面 中 已 存在 的 DOM 元 素来 挂 载 Vue 
实例 ， 它 可 以 是 HIMLElement ， 也 可 以 是 CSS 选择 器 ， 比 如 : 


«div id-"app"»«/div» 
var app = new Vue(í 


el: document.getElementById('app') // 或 者 是 '#app' 
}) 
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挂 载 成 功 后 ， 我 们 可 以 通过 app.$el 来 访问 该 元 素 。Vue 提供 了 很 多 常用 的 实例 属性 与 方法 ， 
都 以 开头 ， 比 如 $el， 后 续 还 会 介绍 更 多 有 用 的 方法 。 

回顾 章节 开始 的 Hello World 代码 ， 在 input 标签 上 ， 有 一 个 v-model 的 指令 ， 它 的 值 对 应 于 
我 们 创建 的 Vue 实例 的 data 选项 中 的 name 字段 ， 这 就 是 Vue 的 数据 绑 定 。 

通过 Vue 实例 的 data 选项 ， 可 以 声明 应 用 内 需要 双 疝 绑 定 的 数据 。 建 议 所 有 会 用 到 的 数据 都 
预先 在 data 内 声明 ， 这 样 不 至 于 将 数据 散落 在 业务 逻辑 中 ， 难 以 维护 。 

Vue 实例 本 身 也 代理 了 data 对 象 里 的 所 有 属性 ， 所 以 可 以 这 样 访问 : 


var app = new Vue(í 
el: '#app', 
data: { 
a: 2 


)) 


console.log(app.a); // 2 


除了 显 式 地 声明 数据 外 ， 也 可 以 指向 一 个 已 有 的 变量 ， 并 且 它 们 之 间 默 认 建 立 了 双向 绑 定 ， 
当 修改 其 中 任意 一 个 时 ， 另 一 个 也 会 一 起 变化 : 
Var myData = { 
a: 1 
} 
var app = new Vue({ 
el: '4app', 
data: myData 
)) 


console.log(app.a); // 1 
// 修 改 属 性 ， 原 数据 也 会 随 之 修改 
app.a = 2; 
console.log(myData.a); // 2 

// 反之 ， 修 改 原 数据 ，Vue 属性 也 会 修改 
myData.a = 3; 


console.log(app.a); // 3 


2.1.2. 生命 周期 


每 个 Vue 实例 创建 时 ， 都 会 经 历 一 系列 的 初始 化 过 程 ， 同 时 也 会 调用 相应 的 生命 周期 钩子 ， 
我 们 可 以 利用 这 些 钩 子 ， 在 合适 的 时 机 执行 我 们 的 业务 逻辑 。 如 果 你 使 用 过 jQuery， 一 定 知 道 它 
的 ready0 方 法 ， 比 如 以 下 示例 : 

$ (document) .ready (function() { 

// DOM 加 载 完 后 ， 会 执行 这 里 的 代码 

}); 
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Vue 的 生命 周期 钧 子 与 之 类 似 ， 比 较 币 用 的 有 : 


e created 实例 创建 完成 后 调用 ， 此 阶段 完成 了 数据 的 观测 等 ， 但 尚未 挂 载 ，$el 还 不 可 用 。 
需要 初始 化 处 理 一 些 数 据 时 会 比较 有 用 ， 后 面 章 节 将 有 介绍 。 
e mounted el 挂 载 到 实例 上 后 调用 ， 一 般 我 们 的 第 一 个 业务 逻辑 会 在 这 里 开始 。 
€ beforeDestroy 实例 销毁 之 前 调用 。 主 要 解 绑 一 些 使 用 addEventListener 监听 的 事件 等 。 
这 些 钧 子 与 el 和 data 类 似 ， 也 是 作为 选项 写 入 Vue AA, EHTK this 指向 的 是 调用 它 
的 Vue 实例 : 


var app = new Vue(í 


el: '#app', 
data: { 
a: 2 


), 
created: function () { 
console.log(this.a); //2 
), 
mounted: function () { 
console.log(this.$el); // «div id-"app"»«/div» 
} 
)) 


2.1.3 ”插值 与 表达 式 
使 用 双 大 括号 (Mustache 语法 ) “{{}}” 是 最 基本 的 文本 插值 方法 ， 它 会 日 动 将 我 们 双向 绑 
定 的 数据 实时 显示 出 来 ， 例 如 : 


«div id-"app"» 
(( book }} 
«/div» 
«script» 
var app = new Vue(í 
el: 'fapp', 
data: { 
book: ' (Vue.js 实战 》， 
} 
)) 


«/script» 

大 括号 里 的 内 容 会 被 替换 为 《Vuejs 实战 》， 通 过 任何 方法 修改 数据 book， 大 括号 的 内 容 都 
会 被 实时 痊 换 ， 比 如 下 面 的 这 个 示例 ， 实 时 显示 当前 的 时 间 ， 每 秒 更 新 : 

«div id-"app"» 


(( date }} 


«/div» 
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«script» 
var app = new Vue(í 

el: '4app', 

data: { 
date: new Date() 

), 

mounted: function () { 
var this = this; // 声明 一 个 变量 指向 vue 实例 this， 保 证 作用 域 一 致 
this.timer = setInterval(function() { 

 this.date = new Date(); // 修 改 数据 date 

), 1000); 

} ， 


beforeDestroy: function () { 
if (this.timer) { 


clearInterval(this.timer); // 在 vue 实例 销毁 前 ， 清 除 我 们 的 定时 器 


)) 
«/script» 


这 里 的 {{ date }} 输出 的 是 浏览 器 默认 的 时 间 格 式 ， 比 如 2017-01-02T14:04:49.470Z , 
Q! 并 非 格式 化 的 时 间 (2017-01-02 22:04:49) ， 所 以 需要 注意 时 区 。 有 多 种 方法 可 以 对 时 
E IN 间 格 式 化 ， 比 如 赋值 前 先 使 用 自 定义 的 函数 处 理 。Vue 的 过 滤器 (filter) 或 计算 属性 
( computed ) 也 可 以 实现 ， 稍 后 会 介绍 到 。 


如 果 有 的 时 候 就 是 想 输 出 HIML， 而 不 是 将 数据 解释 后 的 纯 文 本 ， 可 以 使 用 v-html: 


«div id-"app"» 
«span v-html-"link"»«/span» 
«/div» 
«script» 
var app = new Vue(í 
el: '#app', 
data: { 
link: '«a href="#"> 这 是 一 个 连接 </a>' 


}) 


«/script» 
link 的 内 容 将 会 被 泻 染 为 一 个 具有 点 击 功能 的 a 标签 ， 而 不 是 纯 文 本 。 这 里 要 注意 ， 如 果 将 用 


户 产生 的 内 容 使 用 v-html 输出 后 ， 有 可 能 导致 XSS 攻击 ， 所 以 要 在 服务 端 对 用 户 提 交 的 内 容 进 行 
处 理 ， 一 般 可 将 尖 插 号 “< >” 转 义 。 
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如 果 想 显示 {{ 他 标签 , 而 不 进行 替换 , 使 用 v-pre 即 可 跳 过 这 个 元 素 和 它 的 子 元 素 的 编译 过 程 ， 
例如 : 


«span v-pre»(( 这 里 的 内 容 是 不 会 被 编译 的 } }</span> 


在 {{ 沙 中 ,除了 简单 的 绑 定 属性 值 外 ， 还 可 以 使 用 JavaScript 表达 式 进 行 简单 的 运算 、 三 元 运 
算 等 ， 例 如 : 


<div id="app"> 
{{ number / 10 }} 
{{ isoK ? ' 确 定 ' : ' 取 消 ' }} 
{{ text.split(',').reverse().join(',') }} 
</div> 
<script> 
var app = new Vuel(t{ 
el: '4app', 
data: { 
number: 100, 
isOK: false, 
text: '123,456' 
} 
)) 


«script» 

显示 结果 依次 为 : 10. Hu. 456,123. 

Vuejs 只 文 持 单个 表达 式 ， 不 支持 语句 和 流 控 制 。 另 外 ， 在 表达 式 中 ， 不 能 使 用 用 户 自 定义 
的 全 局 变量 ， 只 能 使 用 Vue 白 名 单 内 的 全 局 变量 ， 例 如 Math 和 Date。 以 下 是 一 些 无 效 的 示例 : 

<!-- 这 是 语句 ， 不 是 表达 式 --> 

(( var book = 'Vue.js 实战 ' }} 

<!-- 不 能 使 用 流 控制 ， 要 使 用 三 元 运算 --> 


(( if (ok) return msg }} 
2.1.4 过 滤器 


Vues 支持 在 {{ }} 插 值 的 尾部 添加 一 个 管道 符 “(|) ”对 数据 进行 过 滤 ， 经 常用 于 格式 化 文 
本 ， 比 如 字母 全 部 大 写 、 货 币 千 位 使 用 逗号 分 隔 等 。 过 滤 的 规则 是 自 定 义 的 ， 通 过 给 Vue 实例 添 
加 选项 filters 来 设置 ， 例 如 在 上 一 节 中 实时 显示 当前 时 间 的 示例 ， 可 以 对 时 间 进 行 格式 化 处 理 : 
«div id="app"> 
{{ date | formatDate }} 


</div> 

«script» 
// 在 月 份 、 日 期 、 小 时 等 小 于 10 时 前 面 补 0 
var padDate = function (value) { 


return value < 10 ? '0' + value : value; 


一 
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}; 


var app = new Vue(í 
el: '4app', 
data: { 
date: new Date() 


} ， 


filters: { 
formatDate: function (value) ( // 这 里 的 value 就 是 需要 过 滤 的 数据 
var date = new Date (value); 


var year - date.getFullYear(); 
var month = padDate(date.getMonth() + 1); 
var day = padDate (date.getDate ()); 
var hours = padDate (date.getHours()); 
var minutes = padDate (date.getMinutes()); 
var seconds = padDate (date.getSeconds ()); 
// 将 整理 好 的 数据 返回 出 去 
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes 
';' + seconds; 
} 
), 


mounted: function () { 


var this = this; // 声明 一 个 变量 指向 Vue 实例 this， 保 证 作用 域 一 致 


this.timer = setInterval(function() { 
 this.date = new Date(); / /修改 数据 date 
), 1000); 


), 
beforeDestroy: function () { 
if (this.timer) { 


clearInterval(this.timer); // 在 Vue 实例 销毁 前 ， 清 除 我 们 的 定时 器 


}) 


</script> 
过 滤 锅 也 可 以 串联 ， 而 且 可 以 接收 参数 ， 例 如 : 
«1-- 串联 --> 


(( message | filterA | filterB }} 


«1-- 接收 参数 -> 


{{ message | filterA('argl', 'arg2') }} 


这 里 的 字符 串 argl 和 arg2 将 分 别传 给 过 滤器 的 第 二 个 和 第 三 个 参数 , DL S8 AEAEE e 
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Q: 过 滤器 应 当 用 于 处 理 简单 的 文本 转换 ， 如 果 要 实现 更 为 复杂 的 数据 变换 ， 应 该 使 用 计 


~N 


2.2 ”指令 与 事件 


指令 (Directives) 是 Vue.js 模板 中 最 常用 的 一 项 功能 ， 它 带 有 前 级 v-， 在 前 文 我 们 已 经 使 用 
过 不 少 指令 了 ， 比 如 vif. v-html. v-pre 等 。 指 令 的 主要 职责 就 是 当 其 表达 式 的 值 改变 时 ， 相 应 地 
将 某 些 行为 应 用 到 DOM 上， 以 v-if 为 例 : 


«div id-"app"» 
«p V-if="show"> 显 示 这 段 文本 </p> 
</div> 
<script> 
var app = new Vue l(t{ 
el: '#app', 
data: { 
show: true 
} 
}) 


«/script» 


当 数 据 show [48 73 true 时 , p 元 素 会 被 插入 , 为 false 时 则 会 被 移 除 。 数据 驱动 DOM 是 Vue;js 
的 核心 理念 ， 所 以 不 到 万 不 得 已 时 不 要 主动 操作 DOM， 你 只 需要 维护 好 数据 ，DOM 的 事 Vue 会 
帮 你 优雅 的 处 理 。 

Vuejs 内 置 了 很 多 指令 , 帮助 我 们 快速 完成 常见 的 DOM 操作 ,比如 循环 泻 染 、 显 示 与 隐藏 等 。 
在 第 5 章 会 详细 地 介绍 这 些 内 置 指令 ， 但 在 此 之 前 ， 你 需要 先知 道 v-bind 和 v-on。 

v-bind 的 基本 用 途 是 动态 更 新 HTML 元 素 上 的 属性 ， 比 如 id、class 等 ， 例 如 下 面 几 个 示例 : 


«div id-"app"» 
«a Vv-bind:href="url"> 链 接 </a> 
«img v-bind:src-"imgUrl"-» 
«/div» 
«script» 
var app = new Vue(í 
el: 'f£fapp', 
data: ( 
url: 'https://www.github.com', 
imgUrl: 'http://xxx.xxx.xx/img.png' 
} 
}) 
«/script» 
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示例 中 的 链接 地 址 与 图 片 的 地 址 都 与 数据 进行 了 绑 定 ， 当 通过 各 种 方式 改变 数据 时 ， 链 接 和 
图 片 都 会 自动 更 新 。 上 述 示例 泻 染 后 的 结果 为 : 


«a href="https://www.github.com"> 链 接 </a> 
«img src-"http://xxx.xxx.xx/img.png"» 
以 上 是 介绍 v-bind 最 基本 的 用 法 ， 它 在 Vuejjs 组 件 中 还 有 着 重要 的 作用 ， 将 在 第 4 章 和 第 7 
章 中 详细 介绍 。 
男 一 个 非常 重要 的 指令 就 是 von， 它 用 来 绑 定 事 件 监 听 器 ， 这 样 我 们 就 可 以 做 一 些 交 互 了 ， 
先 来 看 下 面 的 示例 : 
«div id-"app"» 
«p V-if="show"> 这 是 一 段 文 本 </p> 
<button Vv-on:click="handleClose"> 点 击 隐藏 </button> 
</div> 
«script» 
var app - new Vue(í 
el: '#app', 
data: { 
show: true 


); 
methods: { 
handleClose: function () { 


this.show - false; 


} 
)) 
«/script» 


在 button 按钮 上 ， 使 用 v-on:click 给 该 元 素 绑 定 了 一 个 点 击 事件 ， 在 普通 元 素 上 ，v-on 可 以 监 
听 原 生 的 DOM 事件 ， 除 了 click 外 ， 还 有 dblclick, keyup, mousemove 等 。 表 达 式 可 以 是 一 个 方 
法 名 ， 这 些 方法 都 写 在 Vue 实例 的 methods 属性 内 ,并 且 是 函数 的 形式 ,函数 内 的 this 指向 的 是 当 
前 Vue 实例 本 身 ， 因 此 可 以 直接 使 用 this.xxx 的 形式 来 访问 或 修改 数据 ， 如 示例 中 的 this.show = 
false; 把 数据 show 修改 为 了 false， 所 以 点 击 按钮 时 ， 文 本 p 元 素 就 被 移 除 了 。 
表达 式 除了 方法 名 ， 也 可 以 直接 是 一 个 内 联 语句 ， 上 例 也 可 以 改写 为 : 
«div id="app"> 
«p V-if="show"> 这 是 一 段 文本 </p> 
<button v-on:click-"show = false"> 点 击 隐藏 </button> 
«/div» 
«script» 
var app = new Vue(í 
el: '4app', 
data: { 


show: true 
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)) 


«/script» 


如 果 绑 定 的 事件 要 处 理 复杂 的 业务 逻辑 , 建议 还 是 在 methods 里 声明 一 个 方法 , 这 样 可 读 性 更 
强 也 好 维护 。 
Vue.js 将 methods 里 的 方法 也 代理 了 ， 所 以 也 可 以 像 访问 Vue 数据 那样 来 调用 方法 : 


«div id="app"> 
«p V-if="show"> 这 是 一 段 文本 </p> 
<button Vv-on:click="handleClose"> 点 击 隐 藏 </button> 
</div> 
«script» 
var app = new Vue(í 
el: '#app', 
data: { 
show: true 
h, 
methods: { 
handleClose: function () { 
this.close(); 
), 
close: function () { 


this.show - false; 


}) 


«/script» 


在 handleClose 方法 内 ， 直 接 通过 this.closeO 调 用 了 close0 函 数 。 在 上 面 示 例 中 是 多 此 一 举 的 ， 
只 是 用 于 演示 它 的 用 法 ， 在 业务 中 会 经 常用 到 ， 例 如 以 下 几 种 用 法 都 是 正确 的 : 
<script> 
var app = new Vue({ 
el: '4app', 
data: { 
show: true 
), 
methods: { 
init: function (text) { 


console.log(text); 


), 


mounted: function () { 


this.init(' 在 初始 化 时 调用 '); // 在 初始 化 时 调用 
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上 


app .init(' 通 过 外 部 调用 ') ;  // 在 Vue 实例 外 部 调用 


«/script» 


更 多 关于 v-on 事件 的 用 法 将 会 在 第 7 章 中 详细 介绍 。 
2.3 语法 糖 


语法 糖 是 指 在 不 影响 功能 的 情况 下 ， 添 加 某 种 方法 实现 同样 的 效果 ， 从 而 方便 程序 开发 。 

Vue.js 的 v-bind 和 v-on 指令 都 提供 了 语法 糖 , 也 可 以 说 是 缩写 , 比如 v-bind, 可 以 省 略 v-bind, 
直接 写 一 个 冒号 “:” : 

«a V-bind:href="url"> 链 接 </a> 

«img v-bind:src-"imgUrl"» 

<!-- 缩写 为 --> 

«a :href="url"> 链 接 </a> 


«img :src="imgUrl"> 
v-on 可 以 直接 用 “@” 来 缩写 : 


<button Vv-on:click="handleClose"> 点 击 隐 藏 </button> 
«1-- 缩写 为 --> 
<button Qclick="handleClose"> 点 击 隐藏 </button> 


使 用 语法 糖 可 以 简化 代码 的 书写 ， 从 下 一 章 开 始 ， 所 有 示例 的 v-bind 和 v-on 指令 将 默认 使 用 
语法 糖 的 写法 。 


计算 属性 


模板 内 的 表达 式 常 用 于 简单 的 运算 ， 当 其 过 长 或 逻辑 复杂 时 ， 会 难以 维护 ， 本 章 的 计算 属性 
就 是 用 于 解决 该 问题 的 。 


3.1 什么 是 计算 属性 


通过 上 一 章 的 介绍 ， 我 们 已 经 可 以 搭建 出 一 个 简单 的 Vue 应 用 ， 在 模板 中 双 癌 绑 定 一 些 数据 
或 表达 式 了 。 但 是 表达 式 如 果 过 长 , 或 逻辑 更 为 复杂 时 , 就 会 变 得 腔 肿 甚至 难以 阅读 和 维护 ， 比 如 : 
<div> 


{{ text.split(',').reverse().join(',') }} 
</div> 


这 里 的 表达 式 包 含 3 个 操作 ， 并 不 是 很 清晰 ， 所 以 在 遇 到 复杂 的 逻辑 时 应 该 使 用 计算 属性 。 
上 例 可 以 用 计算 属性 进行 改写 : 
«div id="app"> 
{{ reversedText }} 
</div> 
«script» 
var app = new Vue(í 
el: 'łapp', 
data: { 
text: '123,45e6' 
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), 
computed: { 
reversedText: function () { 
// 这 里 的 tnis 指向 的 是 当前 的 vue 实例 


return this.text.split(',').reverse().join(','); 


} 
}) 
«/script» 


所 有 的 计算 属性 都 以 函数 的 形式 写 在 Vue 实例 内 的 computed 选项 内 ,最 终 返 回 计 算 后 的 结果 。 
3.2 计算 属性 用 法 


在 一 个 计算 属性 里 可 以 完成 各 种 复杂 的 逻辑 ， 包 括 运 算 、 函 数 调用 等 ， 只 要 最 终 返 回 一 个 结 

果 就 可 以 。 除 了 上 例 简 单 的 用 法 ， 计 算 属 性 还 可 以 依赖 多 个 Vue 实例 的 数据 ， 只 要 其 中 任 一 数据 

变化 ， 计 算 属性 就 会 重新 执行 ， 视 图 也 会 更 新 。 例 如 ， 下 面 的 示例 展示 的 是 在 购物 车 内 两 个 包 囊 的 
Wn As DT: 


«div id-"app"» 
总 价 : (( prices }} 
</div> 
<script> 
var app = new Vue(í 
el: '4app', 
data: { 
packagel: [ 
{ 
name: 'iPhone 7', 
price: 7199, 


count: 2 


name: 'iPad', 
price: 2888, 


count: 1 


]; 
package2: [ 


name: 'apple', 


price: 3, 
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count: 5 


name: 'banana', 
price: 2, 


count: 10 


b, 
computed: { 
prices: function () { 
var prices - 0; 
for (var i = 0; i < this.packagel.length; I++) { 
prices += this.packagel[i].price * this.packagel[i].count; 
} 
for (var i = 0; i < this.package2.length; i++) { 
prices += this.package2[i].price * this.package2[i].count; 
} 


return prices; 


}) 


</script> 

当 packagel 或 package2 中 的 商品 有 任何 变化 ， 比 如 购买 数量 变化 或 增删 商品 时 ， 计 算 属性 
prices 就 会 自动 更 新 ， 视 图 中 的 总 价 也 会 自动 变化 。 

每 一 个 计算 属性 都 包含 一 个 getter 和 一 个 setter， 我 们 上 面 的 两 个 示例 都 是 计算 属性 的 默认 用 
法 ， 只 是 利用 了 getter 来 读 取 。 在 你 需要 时 ， 也 可 以 提供 一 个 setter 函数 ， 当 手动 修改 计算 属性 的 
值 就 像 修改 一 个 普通 数据 那样 时 ， 就 会 触发 setter 函数 ， 执 行 一 些 自 定义 的 操作 ， 例 如 : 


«div id-"app"» 
姓名 : (( fullName }} 
«/div» 
«script» 
var app = new Vue(í 
el: '#app', 
data: { 
firstName: 'Jack', 
lastName: 'Green' 
), 
computed: { 


fullName: { 


// getter， 用 于 读 取 
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get: function () { 
return this.firstName + ' ' + this.lastName; 
), 
// setter， 写 入 时 触发 
set: function (newValue) { 
var names = newValue.split(' '); 
this.firstName = names[0]; 


this.lastName - names[names.length - 1]; 


} 
}); 
</script> 


当 执 行 app.fullName = John Doe': 时 ，setter 就 会 被 调用 ， 数 据 frstName 和 lastName 都 会 相对 
更 新 ， 视 图 同样 也 会 更 新 。 

绝 大 多 数 情况 下 ,我 们 只 会 用 默认 的 getter 方 法 来 读 取 一 个 计算 属性 ,在 业务 中 很 少 用 到 setter, 
所 以 在 声明 一 个 计算 属性 时 ， 可 以 直接 使 用 默认 的 写法 ， 不 必 将 getter 和 setter 都 声明 。 

计算 属性 除了 上 述 简 单 的 文本 插值 外 ， 还 经 常用 于 动态 地 设置 元 素 的 样式 名 称 class 和 内 联 样 
式 style， 在 下 章 会 介绍 这 方面 的 内 容 。 当 使 用 组 件 时 ， 计 算 属 性 也 经 常用 来 动态 传递 props， 这 也 
会 在 第 7 章 组 件 里 详细 介绍 。 

计算 属性 还 有 两 个 很 实用 的 小 技巧 容易 被 忽略 : 一 是 计算 属性 可 以 依赖 其 他 计算 属性 ;二 是 
计算 属性 不 仅 可 以 依赖 当前 Vue 实例 的 数据 ， 还 可 以 依赖 其 他 实例 的 数据 ， 例 如 : 


<div id="appl"></div> 
<div id="app2"> 
{{ reversedText }} 
</div> 
«script» 
var appl = new Vuel(t{ 
el: '#appl', 
data: { 
text: '123,456' 


)); 


var app2 = new Vue({ 
el: '4app?', 
computed: { 


reversedText: function () { 


// 这 里 依赖 的 是 实例 appl 的 数据 text 
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return appl.text.split(',').reverse().join(','); 


} 
}) 


</script> 


这 里 我 们 创建 了 两 个 Vue 实例 appl 和 app2， 在 app2 的 计算 属性 reversedText 中 ， 依 赖 的 是 
appl 的 数据 text， 所 以 当 text 变化 时 ， 实 例 app2 的 计算 属性 也 会 变化 。 这 样 的 用 法 在 后 面 章节 介 
绍 的 组 件 和 组 件 化 里 会 用 到 , 尤其 是 在 多 人 协同 开发 时 很 常用 , 因为 你 写 的 一 个 组 件 所 用 得 到 的 数 
据 需 要 依赖 他 人 的 组 件 提供 。 随 着 后 面 对 组 件 的 深入 会 慢 慢 意识 到 这 点 ， 现 在 可 以 不 用 太 过 了 解 。 
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在 上 一 章 介 绍 指令 与 事件 时 ,你 可 能 发 现 调用 methods 里 的 方法 也 可 以 与 计算 属性 起 到 同样 的 
作用 ， 比 如 本 章 第 一 个 示例 可 以 用 methods 改写 为 : 


«div id="app"> 
«1-- 注意 ， 这 里 的 reversedText 是 方法 ， 所 以 要 带 () --> 
{{ reversedText() }} 
</div> 
<script> 
var app = new Vue(í 
el: '#app', 
data: { 
text: '123,456' 
), 
methods: ( 
reversedText: function () { 
// 这 里 的 this 指向 的 是 当前 vue 实例 


return this.text.split(',').reverse().join(','); 


} 
}) 
«/script» 


没有 使 用 计算 属性 , 在 methods 里 定义 了 一 个 方法 实现 了 相同 的 效果 ,甚至 该 方法 还 可 以 接受 
参数 ， 使 用 起 来 更 灵活 。 既 然 使 用 methods 就 可 以 实现 ， 那 么 为 什么 还 需要 计算 属性 呢 ? 原因 就 是 
计算 属性 是 基于 它 的 依赖 缓存 的 。 一 个 计算 属性 所 依赖 的 数据 发 生变 化 时 , 它 才 会 重新 取 值 ， 所 以 
text 只 要 不 改变 ， 计 算 属 性 也 就 不 更 新 ， 例 如 : 


computed: { 


now: function () { 
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return Date.now(); 


) 


这 里 的 Datenow0 不 是 啊 应 式 依 赖 ， 所 以 计算 属性 now 不 会 更 新 。 但 是 methods 则 不 同 ， 只 要 
重新 泻 染 ， 它 就 会 被 调用 ， 因 此 函数 也 会 被 执行 。 

使 用 计算 属性 还 是 methods 取决 于 你 是 否 需 要 缓存 ， 当 遍历 大 数组 和 做 大 量 计 算 时 , 应 当 使 用 
计算 属性 ， 除 非 你 不 希望 得 到 缓存 。 





v-bind 及 class 5 style 绑 定 


DOM 元 素 经 常会 动态 地 绑 定 一 些 class 类 名 或 style 样式 ， 本 章 将 介绍 使 用 v-bind 指令 来 绑 定 
class 和 style 的 多 种 方法 。 


4.1 了 解 v-bind 指令 


在 第 2 章 时 ， 我 们 已 经 介绍 了 指令 v-bind 的 基本 用 法 以 及 它 的 语法 糖 ， 它 的 主要 用 法 是 动态 
更 新 HTML 元 素 上 的 属性 ， 回 顾 一 下 下 面 的 示例 : 


«div id-"app"» 
«a V-bind:href="url"> 链 接 </a> 
«img v-bind:src="imgUrl"> 
«a-- 缩写 为 --> 
«a :href="url"> 链 接 </a> 
«img :src-"imgUrl"» 
«/div» 
«script» 
var app - new Vue(í 
el: 'dTdapp', 
data: { 
url: 'https://www.github.com', 
imgUrl: 'http://xxx.xxx.xx/img.png' 


)) 


«/script» 
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链接 的 href 属性 和 图 片 的 src 属性 都 被 动态 设置 了 ， 当 数据 变化 时 ， 就 会 重新 泻 染 。 

在 数据 绑 定 中 , 最 常见 的 两 个 需求 就 是 元 素 的 样式 名 称 class 和 内 联 样式 style 的 动态 绑 定 ， 它 
们 也 是 HTML 的 属性 ， 因 此 可 以 使 用 v-bind 指令 。 我 们 只 需要 用 v-bind 计算 出 表达 式 最 终 的 字符 
串 就 可 以 , 不 过 有 时 候 表 达 式 的 逻辑 较 复杂 , 使 用 字符 串 拼接 方法 较 难 阅读 和 维护 , 所 以 Vues 增 
强 了 对 class 和 style 的 绑 定 。 


4.2 SE class 的 几 种 方式 


4.2.1 ”对象 语 法 
给 v-bind:class 设置 一 个 对 象 ， 可 以 动态 地 切换 class， 例 如 : 


«div id-"app"» 
«div :class-"( 'active': isActive )"»«/div» 
«/div» 
«script» 
var app = new Vue(í 
el: '#app', 
data: { 
isActive: true 
} 
)) 


«/script» 


上 面 的 :class & [5] F v-bind:class， 是 一 个 语法 糖 ， 如 不 特殊 说 明 ， 后 面 都 将 使 用 语法 糖 
提示 写法 ， 可 以 回顾 第 2.3 节 。 


上 面 示 例 中 ， 类 名 active 依赖 于 数据 isActive， 当 其 为 true It, div 会 拥有 类 名 Active, 为 false 
时 则 没有 ， 所 以 上 例 最 终 演 染 完 的 结果 是 : 


<div class="active"></div> 
对 象 中 也 可 以 传 入 多 个 属性 ， 来 动态 切换 class。 男 外 ，:class 可 以 与 普通 class 共存 ， 例 如 : 


«div id-"app"-» 
«div class-"static" :class-"( 'active': isActive, 'error': 
isError }"></div> 
«/div» 
«script» 
var app - new Vue(í 
el: 'f£fapp', 
data: { 


isActive: true, 
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isError: false 


)) 


«/script» 
:class 内 的 表达 式 每 项 为 真 时 ， 对 应 的 类 名 就 会 加 载 ， 上 面 演 染 后 的 结果 为 : 
«div class="static active"»«/div» 


当 数 据 isActive 或 isError 变化 时 ， 对 应 的 class 类 名 也 会 更 新 。 比 如 当 isError 为 true 时 ， 演 染 
后 的 结果 为 : 


«div class-"static active error"»«/div» 


当 :class 的 表达 式 过 长 或 逻辑 复杂 时 ， 还 可 以 绑 定 一 个 计算 属性 ， 这 是 一 种 很 友好 和 第 见 的 用 
法 ， 一 般 当 条 件 多 于 两 个 时 ， 都 可 以 使 用 data 或 computed， 例 如 使 用 计算 属性 : 


«div id-"app"» 
«div :class-"classes"»«/div» 
«/div» 
«script» 
var app = new Vue(í 
el: '4app', 
data: { 
isActive: true, 
error: null 
b, 
computed: { 
classes: function () { 
return { 
active: this.isActive && !this.error, 


'text-fail': this.error && this.error.type === 'fail' 


}) 


«/script» 

除了 计算 属性 , 你 也 可 以 直接 绑 定 一 个 Object 类 型 的 数据 , 或 者 使 用 类 似 计算 属性 的 methods. 
4.2.2 ”数组 语法 

当 需 要 应 用 多 个 class 时 ， 可 以 使 用 数组 语法 ， 给 :class 绑 定 一 个 数组 ， 应 用 一 个 class 列表 : 


«div id-"app"» 
«div :class-"[activeCls, errorCls]"»«/div» 


«/div» 
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«script» 
var app - new Vue(í 
el: 'fapp', 
data: { 
activeCls: 'active', 


errorCls: 'error' 


)) 


«/script» 
演 染 后 的 结果 为 : 
«div class-"active error"»«/div» 


也 可 以 使 用 三 元 表达 式 来 根据 条 件 切 换 class， 例 如 下 面 的 示例 : 


«div id-"app"» 
«div :class-"[isActive ? activeCls : '', errorCls]"»«/div» 
«/div» 
«script» 
var app = new Vue(í 
el: '#app', 
data: { 
isActive: true, 
activeCls: 'active', 


errorCls: 'error' 


}) 


«/script» 


样式 error 会 始终 应 用 ， 当 数据 isActive 为 真 时 , 样式 active 才 会 被 应 用 。class 有 多 个 条 件 时 ， 
这 样 写 较为 烦琐 ， 可 以 在 数组 语法 中 使 用 对 象 语 法 : 


«div id-"app"» 
«div :class-"[( 'active': isActive }, errorCls]"»«/div» 
«/div» 
«script» 
var app = new Vue(í 
el: '4app', 
data: { 
isActive: true, 


errorCls: 'error' 


)) 


«/script» 
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当然 ， 与 对 象 语法 一 样 ， 也 可 以 使 用 data、computed 和 methods 三 种 方法 ， 以 计算 属性 为 例 : 


«div id-"app"» 
«button :class-"classes"»«/button» 
«/div» 
«script» 
var app = new Vue(í 
el: '4app', 
data: { 
size: 'large', 
disabled: true 
), 
computed: { 
classes: function () { 
return [ 
'"btn', 
{ 
['btn-' + this.size]: this.size !-- '', 


['btn-disabled']: this.disabled 


)) 
«/script» 
示例 中 的 样式 btn 会 始终 应 用 ， 当 数据 size 不 为 空 时 ， 会 应 用 样式 前 缀 btn-， 后 加 size 的 值 ; 
当 数 据 disabled 为 真 时 ， 会 应 用 样式 btn-disabled， 所 以 该 示例 最 终 演 染 的 结果 为 : 


«button class="btn btn-large btn-disabled"»«/button» 


使 用 计算 属性 给 元 素 动态 设置 类 名 ， 在 业务 中 经 常用 到 ， 尤 其 是 在 写 复 用 的 组 件 时 ， 所 以 在 
开发 过 程 中 ， 如 果 表 达 式 较 长 或 逻辑 复杂 ， 应 该 尽 可 能 地 优先 使 用 计算 属性 。 


4.2.3 在 组 件 上 使 用 


本 节 内 容 依 赖 第 7 章 组 件 相 关 的 内 容 ， 如 果 你 尚未 了 解 过 Vuejs 的 组 件 ， 可 以 先 跳 过 
m uy. desi. 
如 果 直 接 在 自 定 义 组 件 上 使 用 class 或 :class， 样 式 规则 会 直接 应 用 到 这 个 组 件 的 根 元 素 上 ， 例 
如 声明 一 个 简单 的 组 件 : 
Vue.component('my-component', { 
template: '«p class="article"> 一 些 文本 </p>， 
)); 
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然后 在 调用 这 个 组 件 时 ， 应 用 上 面 两 节 介绍 的 对 象 语 法 或 数组 语法 给 组 件 绑 定 class， 以 对 象 
语法 为 例 : 


«div id-"app"» 
«my-component :class-"( 'active': isActive )"»«/my-component» 
«/div» 
«script» 
var app - new Vue(í 
el: '4app', 
data: { 


isActive: true 


)) 


«/script» 
最 终 组 件 泻 染 后 的 结果 为 : 


<p class="article active"> 一 些 文本 </p> 


这 种 用 法 仅 适 用 于 目 定义 组 件 的 最 外 层 是 一 个 根 元 素 ， 否 则 会 无 效 ， 当 不 满足 这 种 条 件 或 需 
要 给 具体 的 子 元 素 设置 类 名 时 ， 应 当 使 用 组 件 的 props 来 传递 。 这 些 用 法 同样 适用 于 下 一 节 中 绑 定 
内 联 样式 style 的 内 容 。 


4.3 绑 定 内 联 样式 


使 用 v-bind:style CHI :style) 可 以 给 元 素 绑 定 内 联 样 式 ， 方 法 与 :class 类 似 ， 也 有 对 象 语 法 和 
数组 语法 ， 看 起 来 很 像 直接 在 元 素 上 写 CSS: 


«div id-"app"» 
«div :style-"( 'color': color, 'fontSize': fontSize + 'px' }"> 文 本 </div> 
</div> 
<script> 
var app = new Vue(í 
el: '#app', 
data: { 
color: "'red', 


fontSize: 14 


)) 


«racrint 


CSS 属性 名 称 使 用 驼峰 命名 C(camelCase) 或 短 横 分 隔 命名 Ckebab-case) ， 谊 染 后 的 结果 为 : 


«div style-"color: red; font-size: 14px;"> 文 本 </div> 
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大 多 数 情况 下 ， 和 直接 写 一 长 串 的 样式 不 便于 阅读 和 维护 ， 所 以 一 般 写 在 data 或 computed 里 ， 
以 data 为 例 改 写 上 面 的 示例 : 


«div id-"app"» 
«div :style="styles"> 文 本 </div> 
</div> 
<script> 
var app = new Vue(í 
el: '#app', 
data: { 
styles: { 
color: 'red', 


fontSize: 14 + 'px' 


} 
}) 


</script> 
应 用 多 个 样式 对 象 时 ， 可 以 使 用 数组 语法 : 

«div :style-"[styleA, styleB]"> 文 本 </div> 

在 实际 业务 中 ，:style 的 数组 语法 并 不 常用 ， 因 为 往往 可 以 写 在 一 个 对 象 里 面 ， 而 较为 常用 的 


应 当 是 计算 属性 。 
另外 ， 使 用 :style 时 ，Vuejjs 会 自动 给 特殊 的 CSS 属性 名 称 增加 前 级 ， 比 如 transform. 


回顾 一 下 第 2.2 节 ， 我 们 已 经 介绍 过 指令 (Directive) 的 概念 了 ，Vuejjs 的 指令 是 带 有 特殊 前 
级 “v-” 的 HTML 特性 ， 它 绑 定 一 个 表达 式 ， 并 将 一 些 特性 应 用 到 DOM 上 。 其 实 我 们 已 经 用 到 过 
很 多 Vue 内 置 的 指令 ， 比 如 vhtml、v-pre， 还 有 上 一 章 的 v-bind。 本 章 将 继续 介绍 Vuejs 中 更 多 
常用 的 内 置 指令 。 


5.1 基本 指令 


5.1.1 v-cloak 


v-cloak 不 需要 表达 式 , 它 会 在 Vue 实例 结束 编译 时 从 绑 定 的 HTML 元 素 上 移 除 , 经 常 和 CSS 
的 display: none; 配合 使 用 : 


«div id-"app" v-cloak> 
{{ message }} 
</div> 
<script> 
var app = new Vue(í 
el: '4app', 
data: { 


message: ' 这 是 一 段 文 本 ' 


}) 


«/script» 
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这 时 虽然 已 经 加 了 指令 v-cloak， 但 其 实 并 没有 起 到 任何 作用 ， 当 网 速 较 慢 、Vue.js 文件 还 没 
加 载 完 时 ， 在 页 面 上 会 显示 {{ message }} 的 字样 ， 直 到 Vue 创建 实例 、 编 译 模 板 时 ，DOM 才 会 被 
蔡 换 ， 所 以 这 个 过 程 屏 幕 是 有 闪 动 的 。 只 要 加 一 句 CSS 就 可 以 解决 这 个 问题 了 : 


[v-cloak] { 
display: none; 


} 


在 一 般 情 况 下 ，v-cloak 是 一 个 解决 初始 化 慢 导 致 页 面 闪 动 的 最 佳 实践 ， 对 于 简单 的 项 目 很 实 
H, 但 是 在 具有 工程 化 的 项 目 里 ， 比 如 后 面 进 阶 篇 将 介绍 webpack 和 vue-router 时 , m H HI HTML 
结构 只 有 一 个 空 的 div 元 素 ,剩余 的 内 容 都 是 由 路 由 去 挂 载 不 同 组 件 完 成 的 ,所 以 不 再 需要 v-cloak。 


5.1.2 v-once 


v-once 也 是 一 个 不 需要 表达 式 的 指令 ， 作 用 是 定义 它 的 元 素 或 组 件 只 泻 染 一 次 ， 包 括 元 素 或 
组 件 的 所 有 子 节 点 。 首 次 泻 染 后 ， 不 再 随 数 据 的 变化 重新 泻 染 ， 将 被 视 为 静态 内 容 ， 例 如 : 


«div id="app"> 
«span v-once>{{ message }}</div> 
«div v-once» 
«span»(( message }}</span> 
«/div» 
«/div» 
«script» 
var app = new Vue(í 
el: '£app', 
data: { 
message: ' 这 是 一 段 文本 ' 
} 
}) 


</script> 


v-once 在 业务 中 也 很 少 使 用 ， 当 你 需要 进一步 优化 性 能 时 ， 可 能 会 用 到 。 
52 条件 泻 染 指令 


5.2.1 v-if, v-else-if, v-else 


与 JavaScript 的 条 件 语 句 if else. else if 类 似 , Vue.js 的 条 件 指令 可 以 根据 表达 式 的 值 在 DOM 
中 泻 染 或 销毁 元 素 /组 件 ， 例 如 : 


«div id-"app"» 
«p v-if-"status === 1"> 当 status X 1 时 显示 该 行 </p> 
«p v-else-if-"status === 2"> 当 status 为 2 时 显示 该 行 </p> 
«p Vv-else> 否 则 显示 该 行 </p> 
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«/div» 
«script» 
var app - new Vue(í 
el: 'f£&app', 
data: { 


status: 1 


)) 


«/script» 


v-else-if 要 紧 跟 v-if, v-else 要 紧 跟 v-else-if B v-if， 表 达 式 的 值 为 真 时 ， 当 前 元 素 / 组 件 及 所 
有 子 节点 将 被 演 染 ， 为 假 时 被 移 除 。 如 果 一 次 判断 的 是 多 个 元 素 ， 可 以 在 Vue.js 内 置 的 <template> 
元 素 上 使 用 条 件 指 令 ， 最 终 演 染 的 结果 不 会 包含 该 元 素 ， 例 如 : 


<div id="app"> 
«template v-if-"status === 1"> 
<p> 这 是 一 段 文本 </p> 
<p> 这 是 一 段 文本 </p> 
<p> 这 是 一 段 文 本 </p> 
</template> 
</div> 
«script» 
var app - new Vue(í 
el: 'fapp', 
data: { 


status: 1 


)) 


«/script» 


Vue 在 泻 染 元 素 时 ， 出 于 效率 考虑 ， 会 尽 可 能 地 复 用 己 有 的 元 素 而 非 重 新 演 染 ， 比 如 下 面 的 
示例 : 


«div id-"app"» 
«template v-if-"type === 'name'"» 
<label> 用 户 名 : «/label» 
<input placeholder=" 输 入 用 户 名 "> 
</template> 
<template v-else> 
<label> 邮 箱 : «/label» 
<input placeholder=" 输 入 邮箱 "> 
</template> 
<button @click="handleToggleClick"> 切 换 输 入 类 型 </button> 
</div> 


«script» 
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var app = new Vue(í 
el: '#app', 
data: { 
type: 'name' 
} ， 
methods: { 
handleToggleClick: function() { 


this.type = this.type === 'name' ? 'mail' : 'name'; 


)) 
«/script» 
如 图 5-1 和 图 5-2 所 示 ， 键 入 内 容 后 ， 点 击 切换 按钮 ， 虽 然 DOM 变 了 ， 但 是 之 前 在 输入 框 键 
入 的 内 容 并 没有 改变 ， 只 是 替换 了 placeholder 的 内 容 ， 说 明 <input> 元 素 被 复 用 了 。 


切换 输入 类 型 





5-1 切换 前 的 状态 


切换 输入 类 型 





5-2 ”切换 后 的 状态 


如 果 你 不 希望 这 样 做 ， 可 以 使 用 Vuejs 提供 的 key 属性 ， 它 可 以 让 你 自己 决定 是 否 要 复 用 元 
3X» key 的 值 必 须 是 唯一 的 ， 例 如 : 


«div id="app"> 
«template v-if-"type === 'name'"-» 
<label> 用 户 名 : «/label» 
«input placeholder=" 输 入 用 户 名 " key="name-input"> 
</template> 
<template v-else> 
<label> 邮 箱 : «/label» 
<input placeholder=" 输 入 邮箱 " key="mail-input"> 
</template> 
<button @click="handleToggleClick"> 切 换 输 入 类 型 </button> 
</div> 
<script> 
var app = new Vue(í 


el: '4app', 
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data: { 
type: 'name' 
} ， 
methods: { 
handleToggleClick: function() { 
this.type = this.type === 'name!' ? 'mail' : 'name'; 
} 
} 
)) 


«/script» 


给 两 个 <input> 元 素 都 增加 key 后 ， 就 不 会 复 用 了 ， 切 换 类 型 时 键入 的 内 容 也 会 被 删除 ， 不 过 
<label> 元 素 仍然 是 被 复 用 的 ， 因 为 没有 添加 key 属性 。 


5.2.2 v-show 


v-show 的 用 法 与 v-f 基 本 一 致 ， 只 不 过 v-show 是 改变 元 素 的 CSS 属性 display. 74 v-show 表 
达 式 的 值 为 false 时 ， 元 素 会 隐藏 ， 查 看 DOM 结构 会 看 到 元 素 上 加 载 了 内 联 样式 display: none;, 
例如 : 


«div id-"app"» 
«p v-show-"status === 1"»34 status 为 1 时 显示 该 行 </p> 
</div> 
«script» 
var app = new Vue(í 
el: '#app', 
data: { 
status: 2 
} 
)) 


«/script» 
泻 染 后 的 结果 为 : 


«p style="display: none;"> 当 status 为 1 时 显示 该 行 </p> 


v-show 不 能 在 <template> 上 使 用 。 
提 示 
5.2.3 v-if 与 v-show 的 选择 
v-if AI v-show 具有 类 似 的 功能 ， 不 过 vaf 才 是 真正 的 条 件 泻 染 ， 它 会 根据 表达 式 适 当地 销 左 


或 重建 元 素 及 绑 定 的 事件 或 子 组 件 。 夺 表达 式 初始 值 为 false， 则 一 开始 元 素 /组 件 并 不 会 泻 染 ， 只 
有 当 条 件 第 一 次 变 为 真 时 才 开 始 编译 。 
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而 v-show 只 是 简单 的 CSS REH, Joic2k TEE Et. Abad. HEZ F, vaf 更 适合 
条 件 不 经 党 改变 的 场景 ， 因 为 它 切换 开销 相对 较 大 ， 而 v-show 适用 于 频繁 切换 条 件 。 


5.3 列表 泻 染 指令 v-for 


5.3.1 基本 用 法 


当 需 要 将 一 个 数组 毅 历 或 枚 举 一 个 对 象 循环 显示 时 ， 就 会 用 到 列表 泻 染 指令 v-for。 它 的 表达 
式 需 结合 in 来 使 用 ， 类 似 item in items 的 形式 ， 看 下 面 的 示例 : 


«div id="app"> 
«ul» 
«li v-for-"book in books"»(( book.name ]j«/li» 
«/ul» 
«/div» 
«script» 
var app = new Vue(í( 


el: 'fapp', 


data: { 
books: [ 
( name: ' (Vue.js 实战 》' }, 
( name: ' (JavaScript 语言 精粹 》' }, 


( name: ' (JavaScript 高 级 程序 设计 》' } 


} 
)) 


«/script» 


我 们 定义 一 个 数组 类 型 的 数据 books, H v-for 将 <li> 标签 循环 泻 染 ， 效 果 如 图 5-3 所 示 。 


《Vue.js 实 战 》 
《JavaScript 语 言 精 粹 》 


《JavaScript 高 级 程序 设计 》 





5-3 ”列表 循环 结果 


在 表达 式 中 ，books 是 数据 ，book 是 当前 数组 元 素 的 别名 ， 循 环 出 的 每 个 <1i> 内 的 元 素 都 可 以 
访问 到 对 应 的 当前 数据 book。 列 表演 染 也 文 持 用 of 来 代替 in 作为 分 隔 符 ， 它 更 接近 JavaScript 34 
代 器 的 语法 : 
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«li v-for-"book of books"»(( book.name }}</li> 
v-for 的 表达 式 支 持 一 个 可 选 参数 作为 当前 项 的 索引 ， 例 如 : 


«div id-"app"» 
«ul» 
«li v-for=" (book, index) in books"»((| index }} - {{ book.name }}</li> 
«/ul» 
«/div» 
«script» 
var app = new Vue(í 
el: 'fapp', 
data: { 
books: [ 
( name: ' (Vue.js 实战 》' }, 
( name: ' (JavaScript 语言 精粹 》' }, 
( name: ' (JavaScript 高 级 程序 设计 》' } 


)) 


«/script» 


分 隔 符 耻 前 的 语句 使 用 括号 ， 第 二 项 就 是 books 当前 项 的 索引 , 演 染 后 的 结果 如 图 5-4 所 示 。 


e 0- 《Vue.js 实 战 》 
e 1 一 《JavaScript 语 言 精粹 》 


e 2 - 《JavaScript 高 级 程序 设计 》 





图 5-4 含有 index 选项 的 列表 泻 染 结果 


Q: 如 果 你 使 用 过 Vuejs 1.x 的 版 本 ， 这 里 的 index 也 可 以 由 内 置 的 $index 代替 ， 不 过 在 
提示 2X 里 取消 了 该 用 法 。 


与 v-if — FE, v-for 也 可 以 用 在 内 置 标签 <template> 上 ， 将 多 个 元 素 进 行 演 染 : 


«div id-"app"» 
«ul» 
«template v-for-"book in books"» 
<1i> 书 名 : (( book.name }}</li> 
<1i> 作 者 : (( book.author }}</li> 
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</template> 
«/ul» 
«/div» 
«script» 
var app - new Vue(í 
el: 'f£fapp', 
data: { 
books: [ 
{ 
name: ' (Vue.js XAR) ', 
author: 'ZEi$W' 


name: ' {JavaScript 语言 精粹 》'， 


author: 'Douglas Crockford' 


name: ' (JavaScript 高 级 程序 设计 》 ', 


author: 'Nicholas C.Zakas' 


}) 


«/script» 


除了 数组 外 ， 对 象 的 属性 也 是 可 以 过 历 的 ， 例 如 : 


«div id-"app"» 
«span v-for-"value in user"»(( value }} </span> 
«/div» 
«script» 
var app = new Vue(í 
el: '4app', 
data: { 
user: ( 
name: 'Aresn', 
gender: ' 男 '， 
age: 26 


p 


«/script» 
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泻 染 后 的 结果 为 : 
<span>Aresn </span><span> 男 «/span»«span»26 «/span» 
遍历 对 象 属性 时 ， 有 两 个 可 选 参 数 ， 分 别 是 键 名 和 索引 : 


<div id="app"> 
«ul» 
«li v-for-"(value, key, index) in user"» 
(( index }} - {{ key ]): if value ]] 
«/li» 
«/ul» 
«/div» 
«script» 
var app = new Vue(í 
el: 'fapp', 
data: { 
user: ( 
name: 'Aresn', 
gender: 'B', 
age: 26 


)) 


«/script» 


泻 染 后 的 结果 如 图 5-5 所 示 。 


e 0 — name: Aresn 


e 1- gender: 5 
e 2 — age: 26 





5-S ”遍历 对 象 的 演 染 结果 
v-for i uf LE (REX : 


«div id-"app"» 
«span v-for-"n in 10">{{ n }} </span> 
«/div» 
«script» 
var app - new Vue(í 
el: '#app' 
)) 


«/script» 
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泻 染 后 的 结果 为 : 


L23 5 IU 


5.3.2 ”数组 更 新 


Vue 的 核心 是 数据 与 视图 的 双向 绑 定 ， 当 我 们 修改 数组 时 ，Vue 会 检测 到 数据 变化 ， 所 以 用 
v-for 泻 染 的 视图 也 会 立即 更 新 。Vue 包含 了 一 组 观察 数组 变异 的 方法 ， 使 用 它们 改变 数组 也 会 触 
发 视图 更 新 : 


push() 
popO 
shift() 
unshift() 
splice() 
sort() 


reverse() 
例如 ， 我 们 将 之 前 一 个 示例 的 数据 books 添加 一 项 : 


app .books .Push ({ 
name: ' (css 揭秘 》 ' ， 
author : ' [3$] Lea Verou' 


)); 

可 以 尝试 编写 完整 示例 来 查看 效果 。 

使 用 以 上 方法 会 改变 被 这 些 方法 调用 的 原始 数组 ， 有 些 方法 不 会 改变 原 数组 ， 例 如 : 
e filter 


e concat() 
e slice() 


它们 返回 的 是 一 个 新 数组 ， 在 使 用 这 些 非 变异 方法 时 ， 可 以 用 新 数组 来 葵 换 原 数组 ， 还 是 之 
前 展示 书目 的 示例 ， 我 们 找 出 含有 JavaScript 关键 词 的 书目 ， 例 如 : 


«div id-"app"» 


«ul» 

«template v-for-"book in books"» 
<1i> 书 名 : (( book.name }}</li> 
<1i> 作 者 : (( book.author }}</li> 

</template> 

«/ul» 
«/div» 
«script» 
var app = new Vue(í 


el: '4app', 
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name: ' (Vue.js XX) ', 
author: 'ZEi8á' 


name: ' (JavaScript 语言 精粹 》'， 


author: 'Douglas Crockford' 


name: ' (JavaScript 高 级 程序 设计 》 ', 


author: 'Nicholas C.Zakas' 


} 
)]); 


app.books = app.books.filter(function (item) { 
return item.name.match(/JavaScript/); 
)); 
«/script» 
演 染 的 结果 中 ， 第 一 项 《Vuejjs 实战 》 被 过 滤 掉 了 ， 只 显示 了 书 名 中 含有 JavaScript 的 选项 。 
Vue 在 检测 到 数组 变化 时 ， 并 不 是 直接 重新 泻 染 整个 列表 ， 而 是 最 大 化 地 复 用 DOM LR. E 
换 的 数组 中 , 含有 相同 元 素 的 项 不 会 被 重新 泻 染 ,因此 可 以 大 胆 地 用 新 数组 来 奉 换 旧 数 组 , 不 用 担 
心性 能 问题 。 
需要 注意 的 是 ， 以 下 变动 的 数组 中 ，Vue 是 不 能 检测 到 的 ， 也 不 会 触发 视图 更 新 : 


e 通过 索引 直接 设置 项 ， 比 如 app.books[3] = (...). 
e 修改 数组 长 度 ， 比 如 app.books.length = 1. 


解决 第 一 个 问题 可 以 用 两 种 方法 实现 同样 的 效果 ， 第 一 种 是 使 用 Vue 内 置 的 set 方法 : 


Vue.set(app.books, 3, { 
name: !《CSS 揭秘 》 ' ， 
author: ' [3$] Lea Verou' 

)); 


如 果 是 在 webpack 中 使 用 组 件 化 的 方式 〈 进 阶 篇 中 将 介绍 ) ， 默 认 是 没有 导入 Vue 的 ， 这 时 
可 以 使 用 $set ， 例 如 : 
this.Sset(app.books, 3, ( 


name: ' (css 揭秘 》 ' ， 


author: ' [3$] Lea Verou' 
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}) 
// ZEK this 指向 的 就 是 当前 组 件 实例 ， 即 app。 在 非 webpack 模式 下 也 可 以 用 $set 方法 ， 例 
如 app.$set(...) 


另 一 种 方法 : 
app.books.splice(3, 1, { 
name: !《CSS 揭秘 》 ' ， 


author : ' [3$] Lea Verou' 


)) 
第 二 个 问题 也 可 以 直接 用 splice 来 解决 : 


app.books.splice (1); 


9.9.8 过滤 与 排序 


当 你 不 想 改 变 原 数组 ， 想 通过 一 个 数组 的 副本 来 做 过 滤 或 排序 的 显示 时 ， 可 以 使 用 计算 属性 
来 返回 过 滤 或 排序 后 的 数组 ， 例 如 : 


«div id="app"> 
«ul» 

«template v-for-"book in filterBooks"» 
<1i> 书 名 : (( book.name }}</li> 
<1i> 作 者 : {{ book.author }}</li> 

</template> 

«/ul» 
«/div» 
«script» 
var app - new Vue(í 

el: '4app', 

data: { 
books: [ 

{ 
name: ' (Vue.js X) ', 
author: 'AXE' 


name: ' (JavaScript 语言 精粹 》'， 


author: 'Douglas Crockford' 


name: ' (JavaScript 高 级 程序 设计 》 ' ， 


author: 'Nicholas C.Zakas' 
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} ， 
computed: { 
filterBooks: function () { 
return this.books.filter(function (book) { 
return book.name.match(/JavaScript/); 


)); 


)) 


«/script» 


上 例 是 把 书 名 中 包含 JavaScript 关键 词 的 数据 过 滤 出 来 ， 计 算 属 性 flterBooks 依赖 books, 1H 
是 不 会 修改 books。 实 现 排序 也 是 类 似 的 ， 比 如 在 此 基础 上 新 加 一 个 计算 属性 sortedBooks， 按 照 书 
名 的 长 度 由 长 到 短 进 行 排序 : 

computed: { 

sortedBooks: function () { 
return this.books.sort(function (a, b) { 


return a.name.length « b.name.length; 


His 
} 


Q: Æ Vuejs 2.x 中 废弃 了 1.x 中 内 置 的 limitBy、filterBy 和 orderBy 过 滤器 ， 统 一 改 用 计 
提 示 算 属 性 来 实现 。 


54 方法 与 事件 


5.4.1 基本 用 法 


在 第 2.2 节 ， 我 们 已 经 引入 了 Vue 事件 处 理 的 概念 v-on， 在 事件 绑 定 上 ， 类 似 原生 JavaScript 
的 onclick 等 写法 ， 也 是 在 HIML 上 进行 监听 的 。 例 如 ， 我 们 监听 一 个 按钮 的 点 击 事件 ， 设 置 一 个 
计数 器 ， 每 次 点 击 都 加 1: 


«div id-"app"» 
点 击 次 数 : {1{ counter }} 
<button @click="counter++">+ l1«/button» 
</div> 
«script» 
new Vue(í 
el: 'fapp', 
data: { 


counter: O0 
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} 
)) 


«/script» 


上 面 的 @click 等 同 于 v-on:click， 是 一 个 语法 糖 ， 如 不 特殊 说 明 ， 后 面 都 将 使 用 语法 糖 
提示 写法 ， 可 以 回顾 第 2.3 节 。 


(Qclick 的 表达 式 可 以 直接 使 用 JavaScript 语句 ， 也 可 以 是 一 个 在 Vue 实例 中 methods 选项 内 
的 函数 名 ， 比 如 对 上 例 进行 扩展 ， 再 增加 一 个 按钮 ， 点 击 一 次 ， 计 数 器 加 10: 


«div id-"app"» 
点 击 次 数 : (( counter }} 
«button Qclick-"handleAdd()"»4 1</button> 
«button QGclick-"handleAdd(10)"»4 10«/button» 
«/div» 
«script» 
var app = new Vue(( 
el: 'f£app', 
data: { 
counter: 0 
} ， 
methods: { 
handleAdd: function (count) { 


count = count || 1; 
// this 指向 当前 vue 实例 app 


this.counter += count; 


} 
)) 


«/script» 


在 methods 中 定义 了 我 们 需要 的 方法 供 (click 调用 ， 需 要 注意 的 是 ，@click 调用 的 方法 名 后 
可 以 不 跟 插 号 “0”。 此 时 ， 如 果 该 方法 有 参数 ， 默 认 会 将 原生 事件 对 象 event 传 入 ， 可 以 尝试 修 
改 为 @click="handleAdd"， 然 后 在 handleAdd 内 打印 出 count 参数 看 看 。 在 大 部 分 业务 场景 中 ， 如 
果 方 法 不 需要 传 入 参数 ， 为 了 简便 可 以 不 写 括 号 。 

这 种 在 HTML 元 素 上 监听 事件 的 设计 看 似 将 DOM 5 JavaScript KHS, 违背 分 离 的 原理 ， 实 
则 刚好 相反 。 因 为 通过 HTML 就 可 以 知道 调用 的 是 哪个 方法 ， 将 逻辑 与 DOM AH. COTES. 
最 重要 的 是 ， 当 ViewModel 销毁 时 ， 所 有 的 事件 处 理 器 都 会 目 动 删除 ， 无 须 上 自己 清理 。 

Vue 提供 了 一 个 特殊 变量 gevent， 用 于 访问 原生 DOM 事件 ， 例 如 下 面 的 实例 可 以 阻止 链接 打 
开 : 

«div id-"app"» 

«a href-"http://www.apple.com" Q(click-"handleClick('ZEIEjTJf', Sevent)"» 

打开 链接 </a> 
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«/div» 
«script» 
var app - new Vue(í 
el: 'fapp', 
methods: ( 
handleClick: function (message, event) { 
event.preventDefault (); 


window.alert (message); 


)) 


«/script» 


5.4.2 ”修饰 符 


在 上 例 使 用 的 event.preventDefault0 也 可 以 用 Vue 事件 的 修饰 符 来 实现 ， 在 @ 绑 定 的 事件 后 加 
小 圆 点 “.”， 再 跟 一 个 后 绥 来 使 用 修饰 待 。Vue 文 持 以 下 修饰 符 : 


.Stop 


.prevent 


* 
* 

è capture 
e self 
* once 


具体 用 法 如 下 : 
<!-- 阻止 单 击 事件 冒 泡 --> 


«a Qclick.stop="handle"></a> 

<!-- 提交 事件 不 再 重 载 页 面 --> 

«form @submit .prevent="handle"></form> 
<!-- 修 饰 符 可 以 串联 =--> 

«a @click.stop.prevent="handle"></a> 
<!-- 只 有 修饰 符 --> 

«form 8submit.prevent»«/form» 

<!-- 添 加 事件 侦 听 器 时 使 用 事件 捕获 模式 --> 
«div QGclick.capture-"handle"»...«/div» 
<!-- 只 当 事 件 在 该 元 素 本 身 〈 而 不 是 子 元 素 ) 触发 时 触发 回调 --> 
«div Gclick.self-"handle"»...«/div» 
«1-- 只 触发 一 次 ， 组 件 同样 适用 --> 


«div @click.once="handle">...</div> 
在 表单 元 素 上 监听 键盘 事件 时 ， 还 可 以 使 用 按键 修饰 符 ， 比 如 按 下 具体 某 个 键 时 才 调 用 方法 : 


«1-- 只 有 在 keyCode 是 13 时 调用 vm.submit() --» 
«input @keyup.13= “submit” > 
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也 可 以 日 己 配 置 具体 按键 : 


Vue.config.keyCodes.fl = 112; 
// 全 局 定义 后 ， 就 可 以 使 用 akeyup . fl1 


除了 具体 的 茶 个 keyCode 外 ，Vue 还 提供 了 一 些 快捷 名 称 ， 以 下 是 全 部 的 别名 : 


.enter 

tab 

delete ( 捕获“ 删除” 和“ 退 格 ” 键 ) 

.eSC 

.space 

.up 

.down 

.left 

right 

这 些 按键 修饰 符 也 可 以 组 合 使 用 ， 或 和 鼠标 一 起 配合 使 用 : 
.Ctrl 

.alt 

.Shift 

.meta ( Mac 下 是 Command 键 ，Windows 下 是 窗口 键 ) 
例如 : 


«1!-—- Shift + S 一 一 > 


«input Qkeyup.shift.83-"handleSave"» 
l= CLER F Click € 


«div Gclick.ctrl-"doSomething"»Do something«c/div» 


以 上 就 是 事件 指令 v-on 的 基本 内 容 ,， 在 第 7 章 的 组 件 中 ， 我 们 还 将 介绍 用 v-on 来 绑 定 自 定 义 
事件 。 


5.5 KR: 利用 计算 属性 、 指 令 等 知识 开发 购物 和 


前 5 章 内 容 基 本 涵盖 了 Vuejs 最 核心 和 香 用 的 知识 点 ， 擎 握 这 些 内 容 己 经 可 以 上 手 开 发 一 些 
小 功能 了 了。 本 节 则 以 Vuejs 的 计算 属性 、 内 置 指令 、 方 法 等 内 容 为 基础 ， 完 成 一 个 在 业务 中 具有 
代表 性 的 小 功能 : 购物 车 。 

在 开始 写 代 码 前 ， 要 对 需求 进行 分 析 ， 这 样 有 助 于 我 们 理 清 业务 轴 辑 ， 尽 可 能 还 原 设 计 与 产 
mH. 

购物 车 需要 展示 一 个 已 加 入 购物 车 的 商品 列表 ， 包 含 商品 名 称 、 商 品 单价 、 购 买 数 量 和 操作 
等 信息 ， 还 需要 实时 显示 购买 的 总 价 。 其 中 购买 数量 可 以 增加 或 减少 ,每 类 商品 还 可 以 从 购物 车 中 
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移 除 。 最 终 实现 的 效果 如 图 5-6 所 示 。 
(EE) Sa ? |. file;//Users/aresn/Documents/" © , uj - » + 


商品 名 称 商品 单价 “购买 数量 “操作 


1 iPhone 7 6188 - 1 + 移 除 

2 iPad Pro 5888 - 1 + 移 除 

3 MacBook Pro 21488 - 1 + 移 除 
总 价 : 33,564 








5-6 ”购物 车 效果 图 


在 明确 需求 后 ， 我 们 就 可 以 开始 编程 了 ， 因 为 业务 代码 较 多 ， 这 次 我 们 将 HTML. CSS, 
JavaScript 分 离 为 3 个 文件 ， 便 于 阅读 和 维护 : 


e index.html ( 引入 资源 及 模板 ) 
e indexjs ( Vue 实例 及 业务 代码 ) 
e stylecss (样式 ) 


先 在 index.html 中 引入 Vue.js 和 相关 资源 ， 创 建 一 个 根 元 素来 挂 载 Vue 实例 : 


«!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
<title> 购 物 车 示例 </title> 
«link rel="stylesheet" type-"text/css" href="style.css"> 
</head> 
<body> 


«div id-"app" v-cloak» 


«/div» 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"index.js"»«/script» 

«/body» 

«/html» 


注意 ， 这 里 将 vue.min.js 和 index.js 文件 写 在 <body> 的 最 底部 ， 如 果 写 在 <head> 里 ，Vnue 实例 
将 无 法 创建 ， 因 为 此 时 DOM 还 没有 被 解析 完成 ， 除 非 通过 异步 或 在 事件 DOMContentLoaded (IE 
是 onreadystatechange) 触发 时 再 创建 Vue 实例 ， 这 有 点 像 jQuery 的 $(document).ready0 方 法 。 
本 例 需 要 用 到 Vue.js 的 computed. methods 等 选项 ， 在 index.js 中 先 初 始 化 实例 : 


var app = new Vue({ 
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el: '4app', 
data: { 


), 


computed: { 


fu 
methods: { 


)); 

我 们 需要 的 数据 比较 简单 ， 只 有 一 个 列表 ， 里 面包 含 了 商品 名 称 、 单 价 、 购 买 数量 。 在 实际 
业务 中 ， 这 个 列表 应 该 是 通过 Ajax 从 服务 端 动态 获取 的 ， 这 里 只 做 示例 ， 所 以 直接 写 入 在 data 选 
项 内 ， 另 外 每 个 商品 还 应 该 有 一 个 全 局 唯一 的 ia。 我 们 在 data 内 写 入 列表 list: 


data: { 
list: [ 
{ 
id: I, 
name: 'iPhone 7', 


price: 60188, 


count: 1l 


id: 2; 
name: 'iPad Pro', 
price: 5888, 


count: 1 


id: 3; 
name: 'MacBook Pro', 
price: 21488, 


court: l 


} 

数据 构建 好 后 ， 可 以 在 index.html FRERIK f, *&Jc SEIN, EXE HIS] v-for， 不 过 在 此 之 
前 ， 我 们 先 做 一 些小 的 优化 。 因 为 每 个 商品 都 是 可 以 从 购物 车 移 除 的 ， 所 以 当 列 表 为 空 时 ， 在 页 面 
中 显示 一 个 “购物 车 为 空 ”的 提示 更 为 友好 ， 我 们 可 以 通过 判断 数组 list 的 长 度 来 实现 该 功能 : 

«div id-"app" v-cloak» 


«template v-if-"list.length"» 


50 第 1 篇 基础 篇 


«/template» 
«div v-else> 购 物 车 为 空 </div> 


«/div» 


<template> 里 的 代码 分 两 部 分 ， 一 部 分 是 商品 列表 信息 ， 我 们 用 表格 table 来 展现 ， 男 一 部 分 
就 是 带 有 和 干 位 分 隔 符 的 商品 总 价 〈 每 隔 三 位 数 加 进 一 个 逗号 ) 。 这 部 分 代码 如 下 : 


«template v-if-"list.length"-» 
«table» 
<thead> 
«tr» 
«th»«/th» 
«th» fiii A fk «/ th» 
<th> 商 品 单价 </th> 
<th> 购 买 数量 </th> 
<th> 操 作 </th> 
erftr» 
«/thead» 
<tbody> 


</tbody> 
</table> 
<div> 总 价 : Y {{ totalPrice }}</div> 
</template> 
总 价 totalPrice 是 依赖 于 商品 列表 而 动态 变化 的 ， 所 以 我 们 用 计算 属性 来 实现 ， 顺 便 将 结果 转 
换 为 带 有 “于 位 分 隔 符 ” 的 数字 ， 在 index.js 的 computed 选项 内 写 入 : 
computed: { 
totalPrice: function () { 
var total - 0; 
for (var i = 0; i < this.list.length; i++) { 
var item = this.list[il; 
total += item.price * item.count; 


} 


return total.toString().replace(/MB(?-(Nd(3)) *$) /g, ', ') ; 


} 
这 段 代 码 难点 在 于 干 位 分 阳 符 的 转换 , 读者 可 以 但 阅 正则 匹配 的 相关 内 容 后 尝试 了 解 replace() 


的 正则 含义 。 
最 后 就 剩 下 商品 列表 的 泻 染 和 相关 的 几 个 操作 了 。 先 在 <tbody> 内 把 数组 list 用 v-for 指令 循环 


出 来 : 


«tbody» 
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«tr v-for-"(item, index) in list"> 
«td»(( index + 1 }}</td> 
<td>{{ item.name }}</td> 


<td>{{ item.price }}</td> 


<td> 
<button 
@click="handleReduce (index)" 
:disabled-"item.count === 1"»-«/button» 


{{ item.count }} 
«button @click="handleAdd (index) ">+</button> 
«/td» 
«td» 
<button QGclick-"handleRemove (index) "> 移 除 </button> 
«/td» 
«/tr» 
«/tbody» 


商品 序号 、 名 称 、 单 价 、 数 量 都 是 直接 使 用 插值 来 完成 的 ， 在 第 4 列 的 两 个 按钮 «button» 用 
于 增 / 减 购买 数量 ， 分 别 绑 定 了 两 个 方法 handleReduce 和 handleAdd, 参数 都 是 当前 商品 在 数组 list 
中 的 索引 。 很 多 时 候 , 一 个 元 素 上 会 同时 使 用 多 个 特性 (尤其 是 在 组 件 中 使 用 props. 传递 数据 时 ) ， 
写 在 一 行 代 码 较 长 ， 不 便 阅 读 ， 所 以 建议 特性 过 多 时 ， 将 每 个 特性 都 单独 写 为 一 行 ， 比 如 第 一 个 
«button > 中 使 用 了 v-bind 和 v-on. 两 个 指令 〈 这 里 都 用 的 语法 糖 写 法 ) 。 每 件 商品 购买 数量 最 少 是 
1 件 ， 所 以 当 count 为 1 时 ， 不 允许 再 继续 减少 ， 所 以 这 里 给 <button> 动 态 绑 定 了 disabled 特性 来 
禁用 按钮 。 

在 index.js 中 继续 完成 剩余 的 3 个 方法 : 


methods: ( 
handleReduce: function (index) { 
if (this.list[index].count --- 1) return; 
this.list[index].count--; 


}, 
handleAdd: function (index) { 


this.list[index].count--; 


), 
handleRemove: function (index) { 


this.list.splice(index, 1); 


} 


这 3 个 方法 都 是 直接 对 数组 list 的 操作 ， 没 有 太 复 杂 的 逻辑 。 需 要 说 明 的 是 ， 虽 然 在 button 
上 已 经 绑 定 了 disabled 特性 , 但 是 在 handleReduce 方法 内 又 判断 了 一 遍 ， 这 是 因为 在 某 些 时 候 ， 可 
能 不 一 定 会 用 button 元 素 ， 也 可 能 是 div、span 等 ， 给 它们 增加 disabled 是 没有 任何 作用 的 ， 所 以 
安全 起 见 ， 在 业务 逻辑 中 再 判断 一 次 ， 避 人 免 因 修改 HTML 模板 后 出 现 bug. 
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以 下 是 购物 车 示例 的 完整 代码 : 
index.html: 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
<title> 购 物 车 示例 </title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
«div id-"app" v-cloak> 
«template v-if-"list.length"-» 
«table» 
«thead» 
< 七 工 > 
«th»«/th» 
<th> 商 品名 称 </th> 
<th> 商 品 单价 </th> 
<th> 购 买 数量 </th> 
<th> 操 作 </th> 
«/tr» 
«/thead» 
<tbody> 
<tr v-for=" (item, index) in list"> 
<td>{{ index + 1 ))«/td» 
<td>{{ item.name }}</td> 


<td>{{ item.price }}</td> 


«td» 
«button 
Qclick-"handleReduce (index)" 
:disabled-"item.count === 1"»-«/button» 


{{ item.count }} 
<button @click="handleAdd (index) ">+</button> 
«/td» 
«td» 
<button Qclick-"handleRemove (index) "> 移 除 </button> 
«/td» 
«/tr» 
«/tbody» 
«/table» 
<div> 总 价 : Y (( totalPrice }}</div> 
</template> 
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«div v-else> 购 物 车 为 空 </div> 
«/div» 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"index.js"»«/script» 
«/body» 
«/html» 


index.js: 


var app = new Vue(í 
'fapp', 
data: { 
list: [ 
{ 


el: 


id: 1, 


name: 'iPhone 7', 


} ， 


price: 


count: 


id: 2, 
name: 
price: 


count: 


id: 3; 
name: 
price: 


count: 


6188, 
E 


'iPad Pro', 
5888, 
1 


'MacBook Pro', 
21488, 
l 


computed: { 
totalPrice: function () { 

var total - 0; 

0; i < this.list.length; 


Ehis.ixstiil: 


for (var i - I4) i 
var item = 


total += item.price * item.count; 


return total.toString().replace(/MB(?-(Nd(3]) 4$) /a, ', ') 


, 
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methods: { 

handleReduce: function (index) { 
if (this.list[index].count --- 1) return; 
this.list[index].count--; 

), 

handleAdd: function (index) { 
this.list[index].count--; 

}, 

handleRemove: function (index) { 


this.list.splice(index, 1); 


style.css: 


[v-cloak] { 
display: none; 

} 

table( 
border: lpx solid #e9e9e9; 
border-collapse: collapse; 
border-spacing: 0; 
empty-cells: show; 

} 

th, td{ 
padding: 8px 16px; 
border: lpx solid $e9e9e9; 
text-align: left; 


thí 
background: *4f7f7f7; 
color: 45c6b77; 
font-weight: 600; 
white-space: nowrap; 


) 


练习 1: 在 当前 示例 基础 上 扩展 商品 列表 ， 新 增 一 项 是 否 选中 该 商品 的 功能 ， 总 价 变 为 只 计算 
选中 商品 的 总 价 ， 同 时 提供 一 个 全 选 的 按钮 。 

练习 2: 将 商品 列表 list 改 为 一 个 二 维 数组 来 实现 商品 的 分 类 ， 比 如 可 分 为 “电子 产品 ”“ 生 
活用 品 ” 和 “果蔬 ”， 同 类 商品 聚合 在 一 起 。 提 示 ， 你 可 能 会 用 到 两 次 v-for。 


第 日 章 


wa 


表单 类 控件 承载 了 一 个 网 页 数据 的 录入 与 交互 , 本 章 将 介绍 如 何 使 用 指令 v-model 完成 表单 的 
数据 双 回 绑 定 。 


6.1 基本 用 法 


表单 控件 在 实际 业务 较为 常见 ， 比 如 单 选 、 多 选 、 下 拉 选 择 、 输 入 框 等 ， 用 它们 可 以 完成 数 
据 的 录入 、 校 验 、 提 交 等 。Vuejs 提供 了 v-model 指令 ， 用 于 在 表单 类 元 素 上 双向 绑 定数 据 ， 例 如 
在 输入 框 上 使 用 时 ， 输 入 的 内 容 会 实时 映射 到 绑 定 的 数据 上 。 例 如 下 面 的 例子 : 

«div id-"app"» 

«input type="text" v-model-"message" placeholder-"5ipA..."» 
<p> 输 入 的 内 容 是 : (( message ))«/p» 

</div> 

«script» 

var app = new Vue(í 


el: '4app', 


data: { 
message: '' 
} 
} ) 
«/script» 


在 输入 框 输入 的 同时 ，{{fmessage }} 也 会 实时 将 内 容 演 染 在 视图 中 ， 如 图 6-1 所 示 。 
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Hello World| 


输入 的 内 容 是 : Hello World 





图 6-1 v-model 指令 对 数据 的 双向 绑 定 
对 于 文本 域 textarea 也 是 同样 的 用 法 : 


<div id="app"> 
«textarea v-model-"text" placeholder-"ÉjA..."»«/textarea» 
<p> 输 入 的 内 容 是 : </p> 
«p style-"white-space: pre">{{ text }}</p> 
«/div» 
«script» 
var app = new Vue(í 
el: '£app', 
data: { 


text: '' 


} ) 


«/script» 


属性 ， 对 于 在 <textarea></textarea> 之 间 插 入 的 值 ， 也 不 会 生效 。 

提 IN 使 用 v-model 时 ， 如 果 是 用 中 文 输入 法 输入 中 文 ， 一 般 在 没有 选 定 词组 前 ， 也 就 是 在 
拼音 阶段 ，Vue 是 不 会 更 新 数据 的 ， 当 敲 下 汉字 时 才 会 触发 更 新 。 如 果 布 望 总 是 实时 
更 新 ， 可 以 用 @input 来 替代 v-model。 事 实 上 ，v-model 也 是 一 个 特殊 的 语法 糖 ， 只 
不 过 它 会 在 不 同 的 表单 上 智能 处 理 。 例 如 下 面 的 示例 : 


Q! 使 用 v-model 后 ， 表 单 控件 显示 的 值 只 依赖 所 绑 定 的 数据 ， 不 再 关心 初始 化 时 的 value 


«div id-"app"» 


«input type="text" Qinput-"handleInput" placeholder-"8pA..."» 
<p> 输 入 的 内 容 是 : {{ message ))«/p» 

«/div» 

«script» 


var app = new Vue(í 
el: 'fapp', 
data: { 
message: '' 
), 
methods: { 
handleInput: function (e) { 
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this.message - e.target.value; 


)) 


«/script» 


来 看 看 更 多 的 表单 控件 。 
单 选 按钮 : 


单 选 按钮 在 单独 使 用 时 ， 不 需要 v-model， 直 接 使 用 v-bind 绑 定 一 个 布尔 类 型 的 值 ， 为 真 时 


«div id-"app"» 
«input type="radio" :checked-"picked"» 
<labe1> 单 选 按钮 </1abe1> 
«/div» 
<script> 
var app = new Vue(í 
el: '4app', 
data: { 


picked: true 


)) 


«/script» 


i eH c 8 RIOKSESAL ERARA, WM m v-model 配合 value 来 使 用 : 


«div id-"app"» 
«input type="radio" v-model-"picked" value-"html" id-"html"» 
«label for-"html"»5HTML«/label» 
«br» 
«input type-"radio" v-model-"picked" value-"js" id-"js"» 
«label for-z"js"»JavaScript«/label» 
«br» 
«input type="radio" v-model-"picked" value-"css" id-"css"-» 
«label for-"css"»CSS«/label» 
«br» 
<p> 选 择 的 项 是 : (( picked ))«/p» 
</div> 
<script> 
var app = new Vue(í 
el: '4app', 
data: { 
picked: 'js' 
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} ) 
«/script» 
数据 picked 的 值 与 单 选 按钮 的 value 值 一 臻 时， 就 会 选中 该 项 ， 所 以 当前 状态 下 选中 的 是 第 
二 项 JavaScript， 如 图 6-2 所 示 。 


HTML 
© JavaScript 


CSS 


选择 的 项 是 : js 





6-2. 单 选 按钮 示例 结果 
复 选 框 : 


复 选 框 也 分 单独 使 用 和 组 合 使 用 , 不 过 用 法 稍 与 单 选 不 同 。 复 选 框 单独 使 用 时 , 也 是 用 v-model 
来 绑 定 一 个 布尔 值 ， 例 如 : 


«div id-"app"» 
«input type-"checkbox" v-model-"checked" id-"checked"» 
«label for="checked"> 选 择 状态 : (( checked ))«/label» 
«/div» 
«script» 
var app - new Vue(í 
el: '#app', 
data: { 


checked: false 


)) 


«/script» 


在 勾 选 时 ， 数 据 checked 的 值 变 为 了 true, label 中 泻 染 的 内 容 也 会 更 新 。 

组 合 使 用 时 ， 也 是 v-model 与 value 一 起 ， 多 个 勾 选 框 都 绑 定 到 同一 个 数组 类 型 的 数据 ，value 
的 值 在 数组 当中 ， 就 会 选中 这 一 项 。 这 一 过 程 也 是 双向 的 ， 在 勾 选 时 ，value 的 值 也 会 自动 push. 到 
这 个 数组 中 ， 示 例 代 码 如 下 : 


«div id-"app"» 
«input type-"checkbox" v-model-"checked" value-"html" id-"html"» 
«label for-"html"»5HTML«/label» 
«br» 
«input type="checkbox" v-model-"checked" value-"js" id-"js"» 


«label for-z"js"»JavaScript«/label» 
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«br» 
«input type="checkbox" v-model-"checked" value-"css" id-"css"» 
«label for-z"css"»CSS«/label» 
«br» 
<p> 选 择 的 项 是 : (( checked }}</p> 
«/div» 
«script» 
var app = new Vue(( 
el: '#app', 
data: ( 
checked: ['html', 'css'] 


)) 


«/script» 


当前 状态 下 的 结果 如 图 6-3 所 示 。 


HTML 
© JavaScript 
CSS 


选择 的 项 是 : [ "html", "css" ] 





6-3 ”多 选 框 组 合 使 用 的 结果 
选择 列表 : 


选择 列表 就 是 下 拉 选 择 占 ， 也 是 常见 的 表单 控件 ， 同 样 也 分 为 单 选 和 多 选 两 种 方式 。 先 看 一 
下 单 选 的 示例 代码 : 


«div id-"app"» 
«select v-model-"selected"» 
«option»html«/option» 
«option value-"js"»JavaScript«/option» 
«option»css«/option» 
</select> 
<p> 选 择 的 项 是 : {{ selected }}</p> 
</div> 
<script> 
var app = new Vue(í 


el: '4app', 
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data: { 
selected: 'html' 


}) 


«/script» 


<option> 是 备 选项 ， 如 果 含 有 value 属性 ，v-model 就 会 优先 匹配 value 的 值 ， 如 果 没 有 ， 就 会 
直接 匹配 <option> 的 text， 比 如 选中 第 二 项 时 ，selected 的 值 是 js， 而 不 是 JavaScript. 

给 <select> 添 加 属性 multiple 就 可 以 多 选 了 ， 此 时 v-model 绑 定 的 是 一 个 数组 ， 与 复 选 框 用 法 
类 似 ， 示 例 代 码 如 下 : 


«div id="app"> 
«select v-model-"selected" multiple» 
«option»html«/option» 
«option value-"js"»JavaScript«/option» 
«option»css«/option» 
«/select» 
<p> 选 择 的 项 是 : (( selected ))«/p» 
«/div» 
«script» 
var app = new Vue(í 
el: 'fapp', 
data: { 
selected: ['html', "'js'] 


}) 


«/script» 


在 业务 中 ，<option> 经 常用 v-for 动态 输出 ，value 和 text 也 是 用 v-bind 来 动态 输出 的 ， 例 如 : 


«div id-"app"» 
«select v-model-"selected"» 
«option 
v-for-"option in options" 
:value-"option.value"»(( option.text ))«/option» 
</select> 
<p> 选 择 的 项 是 : {{ selected }}</p> 
</div> 
<script> 
var app = new Vuel(t{ 
el: '4app', 
data: { 
selected: 'html', 
options: [ 


{ 
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text: 'HTML', 


value: 'html' 


text: 'JavaScript', 


value: 'js' 


text: "CSST; 


value: 'css' 


} 
)) 


«/script» 


虽然 用 选择 列表 <select> 控 件 可 以 很 简单 地 完成 下 拉 选 择 的 需求 ， 但 是 在 实际 业务 中 反而 不 党 
用 ， 因 为 它 的 样式 依赖 平台 和 浏览 器 ， 无 法 统一 ， 也 不 太美 观 ， 功 能 也 受 限 ， 比 如 不 文 持 搜 索 ， 所 
以 常见 的 解决 方案 是 用 div 模拟 一 个 类 似 的 控件 。 当 阅读 完 第 7 章 组 件 的 内 容 后 ， 可 以 尝试 编写 一 
个 下 拉 选 择 器 的 通用 组 件 。 


6.2 绑 定 值 


上 一 节 介 绍 的 单 选 按钮 、 复 选 框 和 选择 列表 在 单独 使 用 或 单 选 的 模式 下 ，v-model 绑 定 的 值 是 一 
个 静态 字符 串 或 布尔 值 ， 但 在 业务 中 ， 有 了 时 需要 绑 定 一 个 动态 的 数据 ， 这 时 可 以 用 vbind 来 实现 。 
单 选 按钮 : 
«div id-"app"» 
«input type="radio" v-model-"picked" :value-"value"» 
<labe1l> 单 选 按钮 </label> 
<p>{{ picked }}</p> 
<p>{{ value }}</p> 
</div> 
<script> 
var app = new Vue(í 
el: '#app', 
data: { 
picked: false, 
value: 123 
} 
)) 


«/script» 
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在 选中 时 ，app.picked —- app.value， 值 都 是 123。 
复 选 框 : 


«div id="app"> 
<input 
type-"checkbox" 
v-model-"toggle" 
:true-value-"valuel" 
:false-value-"value2"» 
«label» 4&iktEc/label» 
<p>{{ toggle }}</p> 
<p>{{ valuel }}</p> 
<p>{{ value2 }}</p> 
</div> 
<script> 
var app = new Vue(í 
el: '4app', 
data: { 
toggle: false, 
valuel: 'a', 


value2: 'p' 


}) 


«/script» 
勺 选 时 ，app.togsgle -一 app.valuel; 未 勾 选 时 ，app.toggle 一 = app.value2. 
选择 列表 : 


«div id="app"> 
«select v-model-"selected"» 
«option :value-"( number: 123 j"»123«/option» 
«/select» 
{{ selected.number }} 
</div> 
<script> 
var app = new Vue({ 
el: '4app', 
data: { 


selected: '' 


}) 


«/script» 
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当选 中 时 ，app.selected 是 一 个 Object， 所 以 app.selected.number === 123. 


6.3 修 饰 ^ 


与 事件 的 修饰 符 类 似 ，v-model 也 有 修饰 符 ， 用 于 控制 数据 同步 的 时 机 。 
Jazy: 


在 输入 框 中 ，v-model 默认 是 在 input 事件 中 同步 输入 框 的 数据 (除了 提示 中 介绍 的 中 文 输入 
法 情况 外 ) ， 使 用 修饰 符 lazy 会 转变 为 在 change 事件 中 同步 ， 示 例 代 码 如 下 : 


«div id="app"> 
«input type="text" v-model.lazy="message"> 
<p>{{ message }}</p> 
</div> 
<script> 
var app = new Vue({ 
el: '#app', 
data: { 
message: '' 
} 
)) 


«/script» 
iXHh|, message 并 不 是 实时 改变 的 ， 而 是 在 失 焦 或 按 回 车 时 才 更 新 。 
.number: 


使 用 修饰 符 .number 可 以 将 输入 转换 为 Number 类 型 ， 否 则 虽然 你 输入 的 是 数字 ， 但 它 的 类 型 
其 实 是 String， 比 如 在 数字 输入 框 时 会 比较 有 用 ， 示 例 代 码 如 下 : 


«div id="app"> 
«input type-"number" v-model.number-"message"-» 
<p>{{ typeof message ))«/p» 
«/div» 
«script» 
var app = new Vue(í 
el: '4app', 
data: { 
message: 123 
} 
}) 


</script> 
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.trim: 


修饰 符 trim 可 以 自动 过 滤 输 入 的 首尾 空格 ， 示 例 代码 如 下 : 


«div id="app"> 
«input type="text" v-model.trim-"message"» 
<p>{{ message }}</p> 
</div> 
<script> 
var app = new Vue(í 
el: 'fapp', 
data: { 


message: '' 


)) 
«/script» 
从 Vuejs 2.x 开始 ，v-model 还 可 以 用 于 目 定 义 组 件 ， 满 足 定 制 化 的 需求 ， 在 第 7 章 会 详细 
介绍 。 


wa 


组 件 (Component) 是 Vue.js 最 核心 的 功能 ， 也 是 整个 框架 设计 最 精彩 的 地 方 ， 当 然 也 是 最 难 
掌握 的 。 本 章 将 带领 你 由 浅 入 深 地 学 习 组 件 的 全 部 内 容 ， 并 通过 几 个 实战 项 目 熟 练 使 用 Vue 组 件 。 


7.1 组 件 与 复 用 


7.1.1 为 什么 使 用 组 件 
在 正式 介绍 组 件 前 ， 我 们 先 来 看 一 个 简单 的 场景 ， 如 图 7-1 所 示 。 


与 xxx 聊天 中 





7- 常见 的 聊天 界面 
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图 7-1 中 是 一 个 很 币 见 的 聊天 界面 ， 有 一 些 标准 的 控件 ， 比 如 右上 角 的 关闭 按钮 、 输 入 框 、 发 
送 按钮 等 。 你 可 能 要 问 了 ， 这 有 什么 难 的， 不 就 是 几 个 div. input 吗 ? 好 ， 那 现在 需求 升级 了 ， 这 
几 个 控件 还 有 别 的 地 方 要 用 到 。 没 问题 ， 复 制 粘贴 吧 。 那 如 果 输 入 框 要 融 数 据 验证 ， 按 钮 的 图 标 支 
持 自 定 义 呢 ? 这 样 用 JavaScript 封装 后 一 起 复制 吧 。 那 等 到 项 目 快 完结 时 ， 产 品 经 理 说 ， 所 有 使 用 
输入 框 的 地 方 ， 都 要 改 成 支持 回 车 键 提交 。 好 吧 ， 给 我 一 天 的 时 间 ， 我 一 个 一 个 加 上 去 。 

上 面 的 需求 虽然 有 点 变态 , 但 却 是 业务 中 很 常见 的 ， 那 就 是 一 些 控件 、JavaScript 能 力 的 复 用 。 
没 错 ，Vue.js 的 组 件 就 是 提高 重用 性 的 ， 让 代码 可 复 用 ， 当 学 习 完 组 件 后 ， 上 面 的 问题 就 可 以 分 分 
钟 搞定 了 ， 再 也 不 用 害怕 产品 经 理 的 奇 苑 需求 。 

我 们 先 看 一 下 图 7-1 中 的 示例 用 组 件 来 编写 是 怎样 的 ， 示 例 代 码 如 下 : 


<Card style="width: 350px;"> 
<p slot="title"> 与 xxx 聊天 中 </p> 
<a href="#" slot="extra"> 
«Icon type-"android-close" size-"18"»«/Icon» 
«/a» 


«div style="height: 100px;"» 


«/div» 
«div» 
«Row :gutter-"16"» 
«i-col span-"17"» 
«i-input 
v-model-"value" 
placeholder-" iA ..."»«/i-input» 
«/i-col» 
«i-col span-z"4"» 
«i-button 
type-"primary" 
icon-"paper-airplane"»AiS«/i-button» 
«/1-onl» 
«/Row» 
«/div» 


«/Card» 

是 不 是 很 奇怪 ， 有 很 多 我 们 从 来 都 没有 见 过 的 标签 ， 比 如 <Card>、<Row>、<i-col>、<i-input> 
和 <i-button> 等 ， 而 且 整 段 代 码 除了 内 联 的 几 个 样式 外 ， 一 句 CSS 代码 也 没有 ， 但 最 终 实现 的 UI 
就 是 图 7-1 的 效果 。 

这 些 没 见 过 的 自 定 义 标签 就 是 组 件 ， 每 个 标签 代表 一 个 组 件 ， 在 任何 使 用 Vue 的 地 方 都 可 以 
直接 使 用 。 接 下 来 ， 我 们 就 来 看 看 组 件 的 具体 用 法 。 


7.1.2 组 件 用 法 
回顾 一 下 我 们 创建 Vue 实例 的 方法 : 
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var app = new Vue(í 
el: '#app' 
)) 
组 件 与 之 类 似 ， 需 要 注册 后 才 可 以 使 用 。 注 册 有 全 局 注册 和 局 部 注册 两 种 方式 。 全 局 注册 后 ， 
任何 Vue 实例 都 可 以 使 用 。 全 局 注册 示例 代码 如 下 : 


Vue.component('my-component', { 
// 选 项 
)) 
my-component 就 是 注册 的 组 件 自 定义 标签 名 称 ， 推 荐 使 用 小 写 加 减 号 分 割 的 形式 命名 。 
要 在 父 实例 中 使 用 这 个 组 件 ， 必 须要 在 实例 创建 前 注册 ， 之 后 就 可 以 用 <my-component> 
</my-component> 的 形式 来 使 用 组 件 了 ， 示 例 代 码 如 下 : 


«div id="app"> 
<my-component></my-component> 
</div> 
«script» 
Vue.component('my-component', { 
// 选 项 
)); 


var app = new Vue(í 
el: '4app' 
)) 
«/script» 
此 时 打开 页 面 还 是 空白 的 ， 因 为 我 们 注册 的 组 件 没有 任何 内 容 ， 在 组 件 选 项 中 添加 template 
就 可 以 显示 组 件 内 容 了 ， 示 例 代 码 如 下 : 
Vue.component('my-component', { 
template: '<div> 这 里 是 组 件 的 内 容 </div>' 
}); 
泻 染 后 的 结果 是 : 
«div id="app"> 


<div> 这 里 是 组 件 的 内 容 </div> 


</div> 


D diii 


template 的 DOM 结构 必须 被 一 个 元 素 包 含 ， 如 果 直 接 写 成 “这 里 是 组 件 的 内 容 ”， 不 融 
“<div></div>” 是 无 法 演 染 的 。 

在 Vue 实例 中 ， 使 用 components 选项 可 以 局 部 注册 组 件 ， 注 册 后 的 组 件 只 有 在 该 实例 作用 域 
下 有 效 。 组 件 中 也 可 以 使 用 components 选项 来 注册 组 件 ， 使 组 件 可 以 嵌 套 。 示 例 代 码 如 下 : 
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«div id-"app"» 
«my-component»«/my-component» 
«/div» 
«script» 
var Child = { 
template: '<dqiv> 局 部 注册 组 件 的 内 容 </div>'， 


var app = new Vue(í 
el: '4app', 
components: { 


'my-component': Child 


)) 


«/script» 


Vue 组 件 的 模板 在 茶 些 情况 下 会 受到 HTML 的 限制 ， 比 如 <table> 内 规定 只 允许 是 <t>、<td>、 
<th> 等 这 些 表 格 元 素 ， 所 以 在 <table> 内 直接 使 用 组 件 是 无 效 的 。 这 种 情况 下 ， 可 以 使 用 特殊 的 is 
属性 来 挂 载 组 件 ， 示 例 代 码 如 下 : 


«div id-"app"» 
«table» 
«tbody is-"my-component"»«/tbody» 
«/table» 
«/div» 
«script» 
Vue.component('my-component', { 
template: '<div> 这 里 是 组 件 的 内 容 </div>' 
)); 
var app = new Vue(í 
el: '#app' 
)) 


ciacript 


tbody 在 泻 染 时 ， 会 被 蔡 换 为 组 件 的 内 容 。 常 见 的 限制 元 素 还 有 <ul>、<ol>、<select> . 


(^ 如 果 使 用 的 是 字符 串 模 板 ， 是 不 受 限 制 的 ， 比 如 后 面 章 节 介 绍 的 .vue 单 文件 用 法 等 。 
提 示 

除了 template 选项 外 ， 组 件 中 还 可 以 像 Vue 实例 那样 使 用 其 他 的 选项 ， 比 如 data. computed, 
methods 等 。 但 是 在 使 用 data 时 ， 和 实例 稍 有 区 别 ，data 必须 是 函数 ， 然 后 将 数据 retum 出 去 ， 
例如 : 

«div id="app"> 


<my-component></my-component> 
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«/div» 
«script» 
Vue.component('my-component', { 
template: '<div>{{ message ))«/div»', 
data: function () ( 


return { 
message: ' 组 件 内 容 ' 


)); 


var app = new Vue(í 
el: '#app' 
)) 


«/script» 


JavaScript 对 象 是 引用 关系 ， 所 以 如 果 return 出 的 对 象 引用 了 外 部 的 一 个 对 象 ， 那 这 个 对 象 就 
是 共享 的 ， 任 何 一 方 修改 都 会 同步 。 比 如 下 面 的 示例 : 


«div id-"app"» 
«my-component»«/my-component» 
«my-component»«/my-component» 
«my-component»«/my-component» 

«/div» 

«script» 
var data - { 


counter: 0 


}; 


Vue.component('my-component', { 
template: '«button @click="counter++">{{ counter }}</button>', 


data: function () ( 


return data; 


)]); 


var app = new Vue(í 
el: '4app' 
)) 
</seript> 
组 件 使 用 了 3 次 ， 但 是 点 击 任意 一 个 <button>，3 个 的 数字 都 会 加 1， 那 是 因为 组 件 的 data 5| 
用 的 是 外 部 的 对 象 ， 这 肯定 不 是 我 们 期 望 的 效果 ， 所 以 给 组 件 返回 一 个 新 的 data 对 象 来 独立 ， 示 
例 代 码 如 下 : 
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«div id-"app"» 
«my-component»«/my-component» 
«my-component»«/my-component» 
«my-component»«/my-component» 

«/div» 

«script» 
Vue.component('my-component', { 

template: '«button @click="counter++">{{ counter }}</button>', 
data: function () { 
return { 
counter: 0 


}; 
)); 


var app = new Vue(í 
el: '4app' 


)) 
«/script» 


这 样 ， 点 击 3 个 按钮 就 互 不 影响 了 ， 完 全 达到 复 用 的 目的 。 
7.2 ”使 用 props 传递 数据 


7.2.1 基本 用 法 


组 件 不 仅仅 是 要 把 模板 的 内 容 进行 复 用 ， 更 重要 的 是 组 件 间 要 进行 通信 。 通 常 父 组 件 的 模板 
中 包含 子 组 件 , 父 组 件 要 正 向 地 向 子 组 件 传 递 数 据 或 参数 , 子 组 件 接收 到 后 根据 参数 的 不 同 来 这 染 
不 同 的 内 容 或 执行 操作 。 这 个 正 向 传递 数据 的 过 程 就 是 通过 props 来 实现 的 。 

在 组 件 中 ， 使 用 选项 props 来 声明 需要 从 父 级 接收 的 数据 ，props 的 值 可 以 是 两 种 ， 一 种 是 字 
符 串 数组 ， 一 种 是 对 象 ， 本 小 节 先 介绍 数组 的 用 法 。 比 如 我 们 构造 一 个 数组 ， 接 收 一 个 来 自 父 级 的 
数据 message， 并 把 它 在 组 件 模板 中 这 染 ， 示 例 代 码 如 下 : 


«div id-"app"» 
«my-component message=" 来 自 父 组 件 的 数据 "></my-component> 
</div> 
<script> 
Vue.component('my-component', { 
props: ['message'], 
template: '«div»(( message ))«/div»' 


)): 
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var app = new Vue(í 


el: '4app' 
)) 
«/script» 
演 染 后 的 结果 为 : 


«div id-"app"» 
<div> 来 自 父 组 件 的 数据 </div> 


</div> 


props 中 声明 的 数据 与 组 件 data 函数 retum 的 数据 主要 区 别 就 是 props 的 来 自 父 级 ， 而 data 中 
的 是 组 件 自己 的 数据 , 作用 域 是 组 件 本 身 , 这 两 种 数据 都 可 以 在 模板 template 及 计算 属性 computed 
和 方法 methods 中 使 用 。 上 例 的 数据 message 就 是 通过 props 从 父 级 传递 过 来 的 ， 在 组 件 的 自 定义 
标签 上 直接 写 该 props 的 名 称 ， 如 果 要 传递 多 个 数据 ， 在 props 数组 中 添加 项 即 可 。 

由 于 HTML 特性 不 区 分 大 小 写 ， 当 使 用 DOM BIN, Sti C(camelCase) 的 props 名 称 
要 转 为 短 横 分 隅 命名 〈kebab-case) ， 例 如 : 


«div id-"app"» 
«my-component warning-text=" 提 示人 信息 "></my-component> 
«/div» 
€ScCrIDE» 
Vue.component('my-component', { 
props: ['warningText'], 
template: '<div>{{ warningText }}</div>' 


)); 


var app = new Vue(í 
el: '#app' 
)) 


«/script» 


Q: 如 果 使 用 的 是 字符 串 模板 ， 仍 然 可 以 忽略 这 些 限 制 。 
提 示 

有 时 候 ， 传 递 的 数据 并 不 是 直接 写 死 的 ， 而 是 来 自 父 级 的 动态 数据 ,这 时 可 以 使 用 指令 vbind 
来 动态 绑 定 props 的 值 ， 当 父 组 件 的 数据 变化 时 ， 也 会 传递 给 子 组 件 。 示 例 代码 如 下 ; 


«div id="app"> 
«input type="text" v-model-"parentMessage"» 
«my-component :message-"parentMessage"»«/my-component» 
«/div» 
«script» 
Vue.component('my-component', { 


props: ['message'], 
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template: '<div>{{ message ))«/div»' 


}); 


var app = new Vue(í 
el: '4app', 
data: { 
parentMessage: '' 
} 
)) 


«/script» 


这 里 用 v-model 绑 定 了 父 级 的 数据 parentMessage， 当 通过 输入 框 任意 输入 时 ， 子 组 件 接收 到 
的 props “message” 也 会 实时 响应 ， 并 更 新 组 件 模板 。 


注意 ， 如 果 你 要 直接 传递 数字 、 布 尔 值 、 数 组 、 对 象 ， 而 且 不 使 用 v-bind， 传 递 的 仅 
所 示 ” 仅 是 字符 囊 ， 尝 试 下 面 的 示例 来 对 比 : 
«div id="app"> 
«my-component message-"[1,2,3]"»«/my-component» 
«my-component :message-"[1,2,3]"»«/my-component» 
«/div» 
«script» 
Vue.component('my-component', { 
props: ['message'], 
template: '<div>{{ message.length }}</div>' 


}); 


var app = new Vue(í 
el: '#app' 
)) 


«/script» 


同一 个 组 件 使 用 了 两 次 ， 区 别 仅仅 是 第 二 个 使 用 的 是 v-bind。 泻 染 后 的 结果 ， 第 一 个 
是 7， 第 二 个 才 是 数组 的 长 度 3。 


7.2.2 单 问 数 据 流 


Vue 2.x 5 Vue 1.x 比较 大 的 一 个 改变 就 是 Vue2.x 通过 props 传递 数据 是 单 向 的 了 ， 也 就 是 
父 组 件数 据 变化 时 会 传递 给 子 组 件 , 但 是 反 过 来 不 行 。 而 在 Vue 1.x 里 提供 了 .sync 修饰 符 来 文 持 双 
向 绑 定 。 之 所 以 这 样 设 计 ， 是 尽 可 能 将 父子 组 件 解 簿 ， 避 免 子 组 件 无 意 中 修改 了 父 组 件 的 状态 。 

业务 中 会 经 常 遇 到 两 种 需要 改变 prop 的 情况 ， 一 种 是 父 组 件 传递 初始 值 进来 ， 子 组 件 将 它 作 
为 初始 值 保存 起 来 ， 在 自己 的 作用 域 下 可 以 随意 使 用 和 修改 。 这 种 情况 可 以 在 组 件 data 内 再 声明 
一 个 数据 ， 引 用 父 组 件 的 prop, RARE F: 
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«div id-"app"-» 
«my-component :init-count-"1"»«/my-component» 
«/div» 
«script» 
Vue.component('my-component', { 
props: ['initCount'], 
template: '«div»(( count }}</div>', 
data: function () ( 
return { 


count: this.initCount 


)): 


var app = new Vue(í 
el: '4app' 
)) 


«/script» 


组 件 中 声明 了 数据 count， 它 在 组 件 初始 化 时 会 获取 来 自 父 组 件 的 initcount， 之 后 就 与 之 无 关 


男 一 种 情况 就 是 prop 作为 需要 被 转变 的 原始 值 传 入 。 这 种 情况 用 计算 属性 就 可 以 了 ， 示 例 代 
人 码 如 下 : 


«div id="app"> 
«my-component :width="100"></my-component> 
</div> 
<script> 
Vue.component('my-component', { 
props: ['width'], 
template: '«div :style="style"> 组 件 内 容 </div>'， 
computed: { 
style: function () { 
return { 


width: this.width + 'px' 


}); 


var app = new Vue(í 
el: '4app' 
)) 


«/script» 
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因为 用 CSS 传递 宽度 要 带 单位 (px) ， 但 是 每 次 都 写 太 麻烦 ， 而 且 数值 计算 一 般 是 不 带 单位 
的 ， 所 以 统一 在 组 件 内 使 用 计算 属性 就 可 以 了 。 


注意 ， 在 JavaScript 中 对 和 象 和 数组 是 引用 类 型 ， 指 向 同一 个 内 存 空 间 ， 所 以 props 是 对 
提 示 和 象 和 数组 时 ， 在 子 组 件 内 改变 是 会 影响 父 组 件 的 。 


7.2.3 数据 验证 


我 们 上 面 所 介绍 的 props 选项 的 值 都 是 一 个 数组 ， 一 开始 也 介绍 过 ， 除 了 数组 外 ， 还 可 以 是 对 
象 ， 当 prop 需要 验证 时 ， 就 需要 对 象 写法 。 
一 般 当 你 的 组 件 需要 提供 给 别人 使 用 时 ， 推 荐 都 进行 数据 验证 ， 比 如 某 个 数据 必须 是 数字 类 
型 ， 如 果 传 入 字符 串 ， 就 会 在 控制 台 弹 出 警告 。 
以 下 是 几 个 prop 的 示例 : 
Vue.component('my-component', { 
props: { 
// 必 须 是 数字 类 型 
propA: Number, 
// 必 须 是 字符 串 或 数字 类 型 
propB: [String, Number], 
// 布尔 值 ， 如 果 没 有 定义 ， 默 认 值 就 是 true 
propc: 1 
type: Boolean, 
default: true 
}, 
// 数 字 ， 而 且 是 必 传 
propD: { 
type: Number, 
required: true 
), 
// 如 果 是 数组 或 对 象 ， 默 认 值 必须 是 一 个 函数 来 返回 
propE: { 
type: Array, 
default: function () { 
return []; 
} 
} ， 
// 自 定 义 一 个 验证 函数 
propF: { 
validator: function (value) { 


return value » 10; 
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验证 的 type 类 型 可 以 是 : 


String 
Number 
Boolean 
Object 
Array 


Function 


type 也 可 以 是 一 个 目 定 义 构造 器 ， 使 用 instanceof 检测 。 
当 prop 验证 失败 时 ， 在 开发 版 本 下 会 在 控制 台 抛 出 一 条 警告 。 


7.3 组件 通信 


我 们 已 经 知道 ， 从 父 组 件 回 子 组 件 通信 ,通过 props 传递 数据 就 可 以 了 , 但 Vue 组 件 通信 的 场 
景 不 止 有 这 一 种 ， 归 纳 起 来 ， 组 件 之 间 通 信 可 以 用 图 7-2 表示 。 





7-2 ”组件 通信 示例 


组 件 关 系 可 分 为 父子 组 件 通 信 、 兄 弟 组 件 通 信 、 监 级 组 件 通 信 。 本 节 将 介绍 各 种 组 件 之 间 通 
信 的 方法 。 


7.3.1 自 定 义 事件 


当 子 组 件 需要 向 父 组 件 传递 数据 时 ， 就 要 用 到 自 定 义 事件 。 我 们 在 介绍 指令 v-on 时 有 提 到 ， 
v-on 除了 监听 DOM 事件 外 ， 还 可 以 用 于 组 件 之 间 的 自 定 义 事件 。 

如 果 你 了 解 过 JavaScript 的 设计 模式 一 一 观察 者 模式 ,一 定 知 道 dispatchEvent 和 addEventListener 
这 两 个 方法 。Vue 组 件 也 有 与 之 类 似 的 一 套 模式 ， 子 组 件 用 $emit0 来 触发 事件 ， 父 组 件 用 $onO 来 
监听 子 组 件 的 事件 。 

父 组 件 也 可 以 直接 在 子 组 件 的 自 定 义 标签 上 使 用 v-on 来 监听 子 组 件 触发 的 自 定义 事件 ， 示 例 
代码 如 下 : 
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«div id-"app"» 
<p> 总 数 : (( total }}</p> 
«my-component 
Qincrease-"handleGetTotal" 
Qreduce-"handleGetTotal"»«/my-component» 
«/div» 
«script» 
Vue.component('my-component', { 
template: '\ 
«div» 
«button Gclick-"handleIncrease"»-41«/button»^ 
«button Gclick-"handleReduce"»-1«/button»^ 
«/div»', 
data: function () { 
return { 


counter: 0 


} ， 
methods: { 
handleIncrease: function () { 
this .counter++; 
this.S$emit('increase', this.counter); 
), 
handleReduce: function () { 
this.counter--; 


this.$emit('reduce', this.counter); 


var app - new Vue(í 


el: '4app', 
data: { 
total: 0 


); 
methods: { 
handleGetTotal: function (total) { 


this.total - total; 


}) 


</script> 
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上 面 示 例 中 ， 子 组 件 有 两 个 按钮 ， 分 别 实现 加 1 和 减 1 的 效果 ， 在 改变 组 件 的 data“counter” 
后 ,通过 $emit0 再 把 它 传递 给 父 组 件 , 父 组 件 用 v-on:increase 和 v-on:reduce( 示 例 使 用 的 是 语法 糖 )。 
$emitO 方 法 的 第 一 个 参数 是 自 定 义 事件 的 名 称 , 例如 示例 的 increase 和 reduce 后 面 的 参数 都 是 要 传 
递 的 数据 ， 可 以 不 填 或 填写 多 个 。 

除了 用 v-on 在 组 件 上 监听 自 定 义 事件 外 ， 也 可 以 监听 DOM 事件 ， 这 时 可 以 用 .native 修饰 符 
表示 监听 的 是 一 个 原生 事件 ， 监 听 的 是 该 组 件 的 根 元 素 ， 示 例 代 码 如 下 : 


«my-component v-on:click.native-"handleClick"»«/my-component» 


7.3.2 ”使 用 v-model 
Vue 2.x 可 以 在 自 定 义 组 件 上 使 用 v-model 指令 ， 我 们 先 来 看 一 个 示例 : 


«div id-"app"» 
<p> 总 数 : (( total ))«/p» 
«my-component v-model="total"></my-component> 
</div> 
«script» 
Vue.component('my-component', { 
template: '«button QGclick-"handleClick"»-41«/button»', 
data: function () ( 
return { 


counter: 0 


b, 
methods: { 
handleClick: function () { 
this.counter-c-t; 


this.$emit('input', this.counter); 


)); 


var app = new Vue(í 
el: '4app', 
data: { 
total: 0 
} 
)) 


«/script» 
仍然 是 点 击 按钮 加 1 的 效果 ， 不 过 这 次 组 件 $emit0 的 事件 名 是 特殊 的 mput， 在 使 用 组 件 的 父 


级 ， 并 没有 在 <my-component> 上 使 用 @input=“handler"， 而 是 直接 用 了 v-model 绑 定 的 一 个 数据 
total。 这 也 可 以 称 作 是 一 个 语法 糖 ， 因 为 上 面 的 示例 可 以 间接 地 用 自 定 义 事件 来 实现 : 


T8 


第 1 篇 基础 篇 


«div id-"app"» 
<p> 总 数 : (( total ))«/p» 
«my-component Q@input="handleGetTotal"></my-component> 
</div> 
«script» 
// .. .省略 组 件 代码 
var app = new Vue(í 
el: '#app', 
data: { 
total: 0 
), 
methods: { 
handleGetTotal: function (total) { 
this.total - total; 


)) 
«/script» 


v-model 还 可 以 用 来 创建 自 定 义 的 表单 输入 组 件 ， 进 行 数据 双向 绑 定 ， 例 如 : 


«div id="app"> 
«p»: (( total }}</p> 
«my-component v-model-"total"»«/my-component» 
<button QGclick-"handleReduce"»-1«/button» 
«/div» 
«script» 
Vue.component('my-component', { 
props: ['value'!], 
template: '«input :value-"value" Qinput-"updateValue"»', 
methods: { 
updateValue: function (event) { 


this.Semit('input', event.target.value); 


)); 


var app = new Vue(í 


el: '4app', 
data: { 
total: 0 


), 
methods: { 
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handleReduce: function () { 


this.total--; 


} 
)) 
«/script» 


实现 这 样 一 个 具有 双向 绑 定 的 v-model 组 件 要 满足 下 面 两 个 要 求 : 


e 接收 一 个 value 属性 。 
e 在 有 新 的 value 时 触发 mput 事件 。 


7.3.3 非 父 子 组 件 通信 


在 实际 业务 中 ， 除 了 父子 组 件 通信 外 ， 还 有 很 多 非 父子 组 件 通信 的 场景 ， 非 父子 组 件 一 般 有 
两 种 ， 兄 弟 组 件 和 器 多 级 组 件 。 为 了 更 加 彻底 地 了 解 Vuejs2.x 中 的 通信 方法 ， 我 们 先 来 看 一 下 在 
Vue.js 1.x 中 是 如 何 实现 的 ， 这 样 便 于 我 们 了 解 Vue.js 的 设计 思想 。 

TE Vue.js 1x 中 ,除了 $emit0 方 法 外 , 还 提供 了 $dispatchO0 和 $broadcastO 这 两 个 方法 .$dispatchO 
用 于 向 上 级 派发 事件 ， 只 要 是 它 的 父 级 (一 级 或 多 级 以 上 ) ， 都 可 以 在 Vue 实例 的 events 选项 内 
接收 ， 示 例 代 码 如 下 : 


«1-- 注意 ; 该 示例 需 使 用 Vue .js 1.x 的 版 本 --> 
«div id="app"> 
{{ message }} 
<my-component></my-component> 
</div> 
<script> 
Vue.component('my-component', { 
template: '<button Qclick="handleDispatch"> 派 发 事件 </button>',， 
methods: { 
handleDispatch: function () { 
this.$dispatch('on-message', 来自 内 部 组 件 的 数据 ' ) ; 
| 
} 
)); 
var app = new Vue(í 
el: 'fapp', 
data: { 
message: '' 
), 
events: { 
'on-message': function (msg) { 
this.message - msg; 


} 
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} 
)) 


«/script» 


同 理 ，$broadcastO 是 由 上 级 向 下 级 广播 事件 的 ， 用 法 完全 一 致 ， 只 是 方向 相反 。 

这 两 种 方法 一 旦 发 出 事件 后 ， 任 何 组 件 都 是 可 以 接收 到 的 ， 就 近 原 则 ， 而 且 会 在 第 一 次 接收 
到 后 停止 冒 泡 ， 除 非 返 回 true. 

这 两 个 方法 虽然 看 起 来 很 好 用 ,但 是 在 Vue.js 2.x 中 都 废弃 了 ， 因 为 基于 组 件 树 结构 的 事件 流 
方式 让 人 难以 理解 , 并 且 在 组 件 结构 扩展 的 过 程 中 会 变 得 越 来 越 脆弱 ,并 且 不 能 解决 兄弟 组 件 通 信 
的 问题 。 

在 Vuejs 2.x 中 ， 推 荐 使 用 一 个 空 的 Vue 实例 作为 中 央 事 件 总 线 (bus) ， 也 就 是 一 个 中 介 。 
为 了 更 形象 地 了 解 它 ， 我 们 举 一 个 生活 中 的 例子 。 

比如 你 需要 租房 子 ， 你 可 能 会 找 房产 中 介 来 登记 你 的 需求 ， 然 后 中 介 把 你 的 信息 发 给 满足 要 
求 的 出 租 者 ， 出 租 者 再 把 报价 和 看 房 时 间 告 诉 中 介 ， 由 中 介 再 转达 给 你 ， 整 个 过 程 中 ， 买 家 和 卖家 
并 没有 任何 交流 ， 都 是 通过 中 间 人 来 传 话 的 。 

或 者 你 最 近 可 能 要 换 房 了 ， 你 会 找 房产 中 介 登 记 你 的 信息 ， 订 阅 与 你 找 房 需求 相关 的 资讯 ， 
一 旦 有 符合 你 的 房子 出 现时 ， 中 介 会 通知 你 ， 并 传达 你 房子 的 具体 信息 。 

这 两 个 例子 中 ， 你 和 出 租 者 担任 的 就 是 两 个 路 级 的 组 件 ， 而 房产 中 介 就 是 这 个 中 央 事件 总 线 

(bus) 。 比 如 下 面 的 示例 代码 : 


«div id="app"> 
{{ message }} 
«component-a»«/component-a» 
«/div» 
«script» 


var bus - new Vue(); 


Vue.component('component-a', { 
template: '«button Gclick-"handleEvent"»[£i$ € F«/button»', 
methods: { 
handleEvent: function () { 
bus.$emit('on-message', 'JKBÉBÍF component-a 的 内 容 ') ; 
} 


)); 


var app - new Vue(í 
el: '4app', 
data: { 
message: '' 
), 


mounted: function () { 
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var this = this; 
// 在 实例 初始 化 时 ， 监 听 来 自 bus 实例 的 事件 
bus.S$on('on-message', function (msg) { 
 this.message = msg; 
)); 
} 
)) 
«/script» 


首先 创建 了 一 个 名 为 bus WE Vue 实例 ， 里 面 没有 任何 内 容 ; 然后 全 局 定义 了 组 件 
component-a; 最 后 创建 Vue 实例 app, 在 app 初始 化 时 ， 也 就 是 在 生命 周期 mounted 钩子 函数 里 监 
听 了 来 自 bus 的 事件 on-message, 而 在 组 件 component-a 中 , 点 击 按钮 会 通过 bus 把 事件 on-message 
发 出 去 ， 此 时 app 就 会 接收 到 来 自 bus 的 事件 ， 进 而 在 回调 里 完成 自己 的 业务 逻辑 。 

这 种 方法 巧妙 而 轻 量 地 实现 了 任何 组 件 间 的 通信 ， 包 括 父 子 、 兄 弟 、 路 级 ， 而 且 Vue Lx 和 
Vue 2.x 都 适用 。 如 果 深 入 使 用 ， 可 以 扩展 bus 实例 ， 给 它 添加 data. methods, computed 等 选项 ， 
这 些 都 是 可 以 公用 的 , 在 业务 中 , 尤其 是 协同 开发 时 非常 有 用 , 因为 经 常 需要 共享 一 些 通用 的 信息 ， 
比如 用 户 登 录 的 上 昵称、 性别、 邮箱 等 , 还 有 用 户 的 授权 token 等 。 只 需 在 初始 化 时 让 bus 获取 一 次 ， 
任何 时 间 、 任 何 组 件 就 可 以 从 中 直接 使 用 了 ， 在 单 页 面 富 应 用 (SPA) 中 会 很 实用 ， 我们 会 在 进 阶 
篇 里 逐步 介绍 这 些 内 容 。 

当 你 的 项 目 比较 大 , 有 更 多 的 小 伙伴 参与 开发 时 , 也 可 以 选择 更 好 的 状态 管理 解决 方案 vuex, 
在 进 阶 篇 里 会 详细 介绍 关于 它 的 用 法 。 

除了 中 央 事 件 总 线 bus 外 ， 还 有 两 种 方法 可 以 实现 组 件 间 通信 : 父 链 和 子 组 件 索引 。 


父 链 
在 子 组 件 中 ， 使 用 this.$parent 可 以 直接 访问 该 组 件 的 父 实例 或 组 件 ， 父 组 件 也 可 以 通过 


this.$children 访问 它 所 有 的 子 组 件 ， 而 且 可 以 递归 向 上 或 向 下 无 限 访问 ， 直 到 根 实例 或 最 内 层 的 组 
件 。 示 例 代码 如 下 : 


«div id="app"> 
{{ message }} 
«component-a»«/component-a» 
«/div» 
«script» 
Vue.component('component-a', { 
template: '«button Qclick="handleEvent"> 通 过 父 链 直 接 修改 数据 </button>' z 
methods: { 
handleEvent: function () { 
// 访问 到 父 链 后 ， 可 以 做 任何 操作 ， 比 如 直接 修改 数据 
this.$parent.message = ' 来 自 组 件 component-a 的 内 容 '; 


)); 
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var app = new Vue(í 
el: 'fapp', 
data: { 
message: '' 
} 
)) 
«script» 


尽管 Vue 人 允许 这 样 操作 ， 但 在 业务 中 ， 子 组 件 应 该 尽 可 能 地 避免 依赖 父 组 件 的 数据 ， 更 不 应 
该 去 主动 修改 它 的 数据 ， 因 为 这 样 使 得 父子 组 件 紧 耦合 ， 只 看 父 组 件 ， 很 难 理解 父 组 件 的 状态 ， 因 
为 它 可 能 被 任意 组 件 修改 ， 理 想 情 况 下 ， 只 有 组 件 自 己 能 修改 它 的 状态 。 父 子 组 件 最 好 还 是 通过 
props 和 $emit 来 通信 。 


子 组 件 索引 


当 子 组 件 较 多 时 ， 通 过 this.$children 来 一 一 过 历 出 我 们 需要 的 一 个 组 件 实例 是 比较 困难 的 ， 
尤其 是 组 件 动态 泻 染 时 , 它们 的 序列 是 不 固定 的 。 Vue 提供 了 子 组 件 索引 的 方法 , 用 特殊 的 属性 ref 
来 为 子 组 件 指定 一 个 索引 名 称 ， 示 例 代码 如 下 : 


«div id="app"> 
<button @click="handleRef"> 通 过 ref 获取 子 组 件 实 例 </button> 
«component-a ref-"comA"»«/component-a» 
«/div» 
«script» 
Vue.component('component-a', { 
template: '<div> 子 组 件 </div>'， 
data: function () { 


return { 


message: ' 子 组 件 内 容 ' 


Js 


var app - new Vue(í 
el: '4app', 
methods: { 
handleRef: function () { 
// 通过 $refs 来 访问 指定 的 实例 
var msg = this.$refs.comA.message; 


console.log (msg); 


} 
}) 


</script> 
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在 父 组 件 模板 中 , 子 组 件 标 签 上 使 用 ref 指定 一 个 名 称 ， 并 在 父 组 件 内 通过 this.$refs 来 访问 指 
定名 称 的 子 组 件 。 


Q: $refs R JEZB EIS JE LJ 713. E BIO AL EUR AV. CAAA Ani IW 
jg m 组 件 的 应 急 方 案 ， 应 当 避 免 在 模板 或 计算 属性 中 使 用 $refs。 


与 Vue 1.x 不 同 的 是 ，Vue 2.x 将 v-el 和 v-ref 合并 为 了 ref，Vue 会 自动 去 判断 是 普通 标签 还 
是 组 件 。 可 以 尝试 补 全 下 面 的 代码 ， 分 别 打 印 出 两 个 ref 看 看 都 是 什么 : 


«div id="app"> 
<p ref="p"> 内 容 </p> 
<child-component ref="child"></child-component> 


</div> 


7.4 使 用 slot 分 发 内 容 


7.4.1 什么 是 slot 


我 们 先 看 一 个 比较 常规 的 网 站 布局 ， 如 图 7-3 所 示 。 





7-3 网 站 布局 


这 个 网 站 由 一 级 导航 、 二 级 导航 、 左 侧 列表 、 正 文 以 及 底部 版 权 信息 5 个 模块 组 成 ， 如 果 要 
将 它们 都 组 件 化 ， 这 个 结构 可 能 会 是 : 
<app> 
<menu-main></menu-main> 


<menu-sub></menu-sub> 
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«div class-"container"» 
«menu-left»«/menu-left» 
«container»«/container» 

«/div» 

«app-footer»«/app-footer» 

«/app» 


当 需 要 让 组 件 组 合 使 用 ， 混 合 父 组 件 的 内 容 与 子 组 件 的 模板 时 ， 就 会 用 到 slot， 这 个 过 程 叫 作 
内 容 分 发 〈transclusion) 。 以 <app> 为 例 ， 它 有 两 个 特点 : 


e <app> 组 件 不 知道 它 的 挂 载 点 会 有 什么 内 容 。 挂 载 点 的 内 容 是 由 <app> 的 父 组 件 决定 的 。 
e <app> 组 件 很 可 能 有 它 自 己 的 模板 。 


props 传递 数据 、events 触发 事件 和 slot 内 容 分 发 就 构成 了 Vue 组 件 的 3 个 API 来 源 ， 再 复 
杂 的 组 件 也 是 由 这 3 部 分 构成 的 。 


7.4.2 ERE} 
正式 介绍 slot 前 ， 需 要 先知 道 一 个 概念 : 编译 的 作用 域 。 比 如 父 组 件 中 有 如 下 模板 : 


<child-component> 
(( message }} 


«/child-component» 


这 里 的 message 就 是 一 个 slot， 但 是 它 绑 定 的 是 父 组 件 的 数据 ， 而 不 是 组 件 <child-componen 人 > 
的 数据 。 

父 组 件 模板 的 内 容 是 在 父 组 件 作 用 域内 编译 ， 子 组 件 模板 的 内 容 是 在 子 组 件 作 用 域内 编译 。 
例如 下 面 的 代码 示例 : 


«div id="app"> 
<child-component v-show="showChild"></child-component> 
</div> 
<script> 
Vue.component('child-component', { 
template: '<div> 子 组 件 </div>' 
}); 


var app = new Vue(í 
el: '#app', 
data: { 
showChild: true 
} 
)) 


«/script» 


这 里 的 状态 showChild 绑 定 的 是 父 组件 的 数据 ， 如 果 想 在 子 组 件 上 绑 定 ， 那 应 该 是 : 
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«div id-"app"» 
«child-component»«/child-component» 
«/div» 
«script» 
Vue.component('child-component', { 
template: '«div v-show-"showChild"» TiHfb«/aiv»', 
data: function () { 
return { 
showChild: true 


)); 


var app = new Vue({ 
el: '4app' 
}) 


</script> 
因此 ，slot 分 发 的 内 容 ， 作 用 域 是 在 父 组 件 上 的 。 
7.4.3 slot 用 法 
单个 Slot 


在 子 组 件 内 使 用 特殊 的 <slot> 元 素 就 可 以 为 这 个 子 组 件 开 局 一 个 slot 〈 揪 槽 ) ， 在 父 组 件 模 板 
里 ， 插 入 在 子 组 件 标 签 内 的 所 有 内 容 将 痊 代 子 组 件 的 <slot> 标签 及 它 的 内 容 。 示 例 代码 如 下 : 


«div id-"app"-» 
«child-component» 
<p> 分 发 的 内 容 </p> 
<p> 更 多 分 发 的 内 容 </p> 
</child-component> 
</div> 
<script> 
Vue.component('child-component', { 
template: '\ 
«div» 
«slot» 
<p> 如 果 父 组 件 没 有 插入 内 容 ， 我 将 作为 默认 出 现 </p>\ 
</slot>\ 
«/div»' 


)); 


var app = new Vue(í 


el: '#app' 
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}) 


</script> 


子 组 件 child-component 的 模板 内 定义 了 一 个 <slot> 元 素 ， 并 且 用 一 个 <p> 作为 默认 的 内 容 ， 
在 父 组 件 没有 使 用 slot 时 ， 会 泻 染 这 段 默 认 的 文本 ; 如 果 写 入 了 slot, MRA EMEA 。 所 
以 上 例 泻 染 后 的 结果 为 : 


«div id="app"> 
<div> 
<p> 分 发 的 内 容 </p> 
<p> 更 多 分 发 的 内 容 </p> 
</div> 


</div> 


Q: 注意 ， 子 组 件 <slof> 内 的 备用 内 容 ， 它 的 作用 域 是 子 组 件 本 身 . 
提 示 


具名 Slot 


给 <slot> 元 素 指 定 一 个 name 后 可 以 分 发 多 个 内 容 ， 有 具名 Slot 可 以 与 单个 Slot 共存 ， 例 如 下 面 
的 示例 : 


«div id="app"> 
<child-component> 
<h2 slot="header"> 标 题 </h2> 
<p> 正 文 内 容 </p> 
<p> 更 多 的 正文 内 容 </p> 
<div slot="footer"> 底 部 信息 </div> 
</child-component> 
</div> 
<script> 
Vue.component('child-component', { 
template: '\ 
<div class="container">\ 
<div class="header">\ 


«slot name-"header"»«/slot»* 


«/div»* 

«div class-"main"»V 
«slot»«/slot»V 

</div>\ 


«div class-"footer"»V 
«slot name-"footer"»«/slot»VN 
«/div»N 
«/div»' 


)); 
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var app = new Vue(í 
el: '4app' 
)) 


«/script» 


子 组 件 内 声明 了 3 个 <slot> 元 素 ， 其 中 在 <div class="main"> 内 的 <slot> 没有 使 用 name 特性 ， 
它 将 作为 默认 slot 出 现 ， 父 组 件 没有 使 用 slot 特性 的 元 素 与 内 容 都 将 出 现在 这 里 。 

如 果 没 有 指定 默认 的 匿名 slot， 父 组 件 内 多 余 的 内 容 片 段 都 将 被 抛弃 。 

上 例 最 终 演 染 后 的 结果 为 : 


«div id-"app"» 
«div class-"container"» 

«div class-"header"» 
<h2> 标 题 </h2> 

«/div» 

«div class-"main"» 
<p> 正 文 内 容 </p> 
<p> 更 多 的 正文 内 容 </p> 

</div> 

«div class-"footer"» 
<div> 底 部 信息 </div> 

</div> 

</div> 


</div> 
在 组 合 使 用 组 件 时 ， 内 容 分 发 API 至 关 重 要 。 
7.4.. 作用 域 插 构 


作用 域 播 槽 是 一 种 特殊 的 slot， 使 用 一 个 可 以 复 用 的 模板 蔡 换 已 泻 染 元 素 。 概 念 比较 难 理解 ， 
我 们 先 看 一 个 简单 的 示例 来 了 解 它 的 基本 用 法 。 示 例 代码 如 下 : 


«div id="app"> 
<child-component> 
<template scope="props"> 
<p> 来 自 父 组 件 的 内 容 </p> 
<p>{{ props.msg }}</p> 
«/template» 
«/child-component» 
«/div» 
«script» 
Vue.component('child-component', { 
template: '\ 


«div class-"container"»VN 


«slot msg=" 来 自 子 组 件 的 内 容 "></slot>\ 
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«/div»' 
)); 


var app = new Vue(í 
el: '#app' 
)) 
«/script» 


观察 子 组 件 的 模板 ， 在 <slot> 元 素 上 有 一 个 类 似 props. 传递 数据 给 组 件 的 写法 msg-"xxx", Hf 
数据 传 到 了 插 槽 。 父 组 件 中 使 用 了 <template> 元 素 , 而 且 拥 有 一 个 scope="props" 的 特性 ,这 里 的 props 
只 是 一 个 临时 变量 ,就 像 V-for="item in items" 里 面 的 item — FE template 内 可 以 通过 临时 变量 props 
访问 来 自 子 组 件 插 槽 的 数据 msg. 

将 上 面 的 示例 泻 染 后 的 最 终结 果 为 : 


<div id="app"> 
«div class-"container"» 
<p> 来 组 父 组 件 的 内 容 </p> 
<p> 来 自 子 组 件 的 内 容 </p> 
</div> 


</div> 


作用 域 插 槽 更 具 代 表 性 的 用 例 是 列表 组 件 ， 允 许 组 件 自 定义 应 该 如 何 泻 染 列表 每 一 项 。 示 例 
代码 如 下 : 


<div id="app"> 
«my-list :books="books"> 
«1-- 作用 域 插 槽 也 可 以 是 具名 的 Slot --» 
«template slot-"book" scope="props"> 
<li>{{ props.bookName }}</li> 
</template> 
«/my-list» 
«/div» 
«script» 
Vue.component('my-list', { 
props: { 
books: { 
type: Array, 
default: function () { 


return []; 


}, 
template: '\ 
<ul>\ 


<slot name="book"\ 
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v-for-"book in books"N 
:book-name-"book.name"»VX 
«1-- 这 里 也 可 以 写 默认 slot 内 容 -->\ 
</slot>\ 
«/ul»' 


)); 


var app - new Vue(í 


el: 'fapp', 
data: { 
books: [ 
( name: ' (Vue.js XE) ' }, 
( name: ' (JavaScript 语言 精粹 》' }, 


( name: ' (JavaScript 高 级 程序 设计 》' } 


} 
}) 


«script» 


子 组 件 my-list 接收 一 个 来 自 父 级 的 prop 数组 books， 并 且 将 它 在 name 73 book 的 slot 上 使 用 
v-for 指令 循环 ， 同 时 暴露 一 个 变量 bookName。 

如 果 你 仔细 揣摩 上 面 的 用 法 , 你 可 能 会 产生 这 样 的 疑问 : 我 直接 在 父 组 件 用 v-for 不 就 好 了 吗 ， 
为 什么 还 要 绕 一 步 , 在 子 组 件 里 面 循环 呢 ? 的 确 , 如 果 只 是 针对 上 面 的 示例 , 这 样 写 是 多 此 一 举 的 。 
此 例 的 用 意 主要 是 介绍 作用 域 揪 槽 的 用 法 , 并 没有 加 入 使 用 场景 ,而 作用 域 揪 槽 的 使 用 场景 就 是 既 
可 以 复 用 子 组 件 的 slot， 又 可 以 使 slot 内 容 不 一 致 。 如 果 上 例 还 在 其 他 组 件 内 使 用 ，<l> 的 内 容 泻 
染 权 是 由 使 用 者 掌握 的 ， 而 数据 却 可 以 通过 临时 变量 〈 比 如 props). 从 子 组 件 内 获取 。 


7.4.5 访问 slot 


在 Vuejs 1.x 中 ， 想 要 获取 某 个 slot 是 比较 麻烦 的 ， 需 要 用 v-el 间接 获取 。 而 Vue.js 2.x 提供 
了 用 来 访问 被 slot 分 发 的 内 容 的 方法 $slots， 请 看 下 面 的 示例 : 


«div id-"app"» 
«child-component» 
«h2 slot="header"> 标 题 </h2> 
<p> 正 文 内 容 </p> 
<p> 更 多 的 正文 内 容 </p> 
<div slot="footer"> 底 部 信息 </div> 
</child-component> 
</div> 
«script» 
Vue.component('child-component', { 
template: '\ 


«div class-"container"»* 
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«div class-"header"»V 


«slot name-"header"»«/slot»WN 


«/div»N 

«div class-"main"»V 
«slot»«/slot»* 

«/div»N 


«div class-"footer"»V 
«slot name-"footer"»«/slot»A 
«/div»N 
</div>"; 


mounted: function () { 


var header = this.S$slots.header; 
var main = this.S$slots.default; 
var footer = this.S$slots.footer; 


console.log (footer); 
console.log(footer[0].elm.innerHTML); 
} 
)); 


var app = new Vue(í 
el: 'f£fapp' 
)) 


«/script» 


通过 $slots 可 以 访问 某 个 具名 slot, this.$slots.default 包括 了 所 有 没有 被 包含 在 具名 slot 中 的 节 
点 。 尝 试 编写 代码 ， 查 看 两 个 console 打印 的 内 容 。 

$slots 在 业务 中 几乎 用 不 到 ， 在 用 render 函数 〈 进 阶 篇 中 将 介绍 ) 创建 组 件 时 会 比较 有 用 ， 但 
主要 还 是 用 于 独立 组 件 开 发 中 。 


7.5 组 件 高 级 用 法 


本 节 会 介绍 组 件 的 一 些 高 级 用 法 ， 这 些 用 法 在 实际 业务 中 不 是 很 常用 ， 但 在 独立 组 件 开发 时 
可 能 会 用 到 。 如 果 你 感觉 以 上 内 容 已 经 足够 完成 你 的 业务 开发 了 ， 可 以 跳 过 本 节 ; 如 果 你 想 继续 探 
R Vue 组 件 的 奥秘 ， 读 完 本 节 会 对 你 有 很 大 的 启发 。 


7.5.4 递归 组 件 
组 件 在 它 的 模板 内 可 以 递归 地 调用 自己 , 只 要 给 组 件 设置 name 的 选项 就 可 以 了 。 示 例 代码 如 下 : 
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«div id-"app"» 
«child-component :count-z"1"»«/child-component» 
«/div» 
«script» 
Vue.component('child-component', { 
name: 'child-component', 
props: { 
count: { 
type: Number, 
default: 1 


- 
template: '\ 
«div class-"child"»V 
«child-componentV 
:count-"count + 1"\ 
v-if-"count < 3"»«/child-component»V 
zidi"; 


}); 


var app = new Vue(í 
el: '#app' 
)) 


«/script» 


设置 name 后 ， 在 组 件 模板 内 就 可 以 递归 使 用 了 ， 不 过 需要 注意 的 是 ， 必 须 给 一 个 条 件 来 限制 
递归 数量 ， 否 则 会 抛 出 错误 : max stack size exceeded. 

组 件 递归 使 用 可 以 用 来 开发 一 些 具 有 未 知 层级 关系 的 独立 组 件 ， 比 如 级 联 选择 器 和 树 形 控件 
等 ， 如 图 7-4 和 图 7-5 所 示 。 


江苏 / 南京 / 夫子 庙 a 


> 夫子 庙 





7-4 级 联 选 择 器 
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图 parent! 


v parent 1-0 
leaf 
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- parent 1-1 
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7-5” 树 形 控件 
在 实战 篇 里 ， 我 们 会 详细 介绍 级 联 选 择 器 的 实现 。 
7.5.2 ”内 联 模 板 


组 件 的 模板 一 般 都 是 在 template 选项 内 定义 的 ，Vue 提供 了 一 个 内 联 模板 的 功能 ， 在 使 用 组 
件 时 ， 给 组 件 标签 使 用 inline-template 特性 ， 组件 就 会 把 它 的 内 容 当 作 模 板 ， 而 不 是 把 它 当 内 容 分 
发 ， 这 让 模板 更 灵活 。 示 例 代 人 码 如 下 : 

«div id-"app"» 

«child-component inline-template-» 
«div» 
<h2> 在 父 组 件 中 定义 子 组 件 的 模板 </h2> 
<p>{{ message }}</p> 
<p>{{ msg }}</p> 
</div> 
</child-component> 
</div> 
<script> 
Vue.component('child-component', { 
data: function () { 


return { 


msg: ' 在 子 组 件 声 明 的 数据 ' 


} 
)); 


var app - new Vue(í 
el: 'f£fapp', 
data: { 


message: ' 在 父 组 件 声明 的 数据 ' 


}) 


«/script» 
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泻 染 后 的 结果 为 : 


«div id="app"> 
<div> 
<h2> 在 父 组 件 中 定义 子 组 件 的 模板 </h2> 
<p> 在 父 组 件 声明 的 数据 </p> 
<p> 在 子 组 件 声明 的 数据 </p> 
</div> 


</div> 


在 父 组 件 中 声明 的 数据 message 和 子 组 件 中 声明 的 数据 msg, P^ RI UTERE Cn Is). 优 
先 使 用 子 组 件 的 数据 )。 这 反而 是 内 联 模 板 的 缺点 ， 就 是 作用 域 比较 难 理解 ， 如 果 不 是 非常 特殊 的 
场景 ， 建 议 不 要 轻易 使 用 内 联 模板 。 


7.5.3 动态 组 件 


Vue.js 提供 了 一 个 特殊 的 元 素 <component> 用 来 动态 地 挂 载 不 同 的 组 件 ， 使 用 is 特性 来 选择 
要 挂 载 的 组 件 。 示 例 代 码 如 下 : 


«div id-"app"» 
«component :is-"currentView"»«/component» 
«button Qclick-"handleChangeView('A')"»4]if& fll Acz/button» 
«button Gclick-"handleChangeView('B')"»20]1&$| B«/button» 
«button Gclick-"handleChangeView ('C')"»0]1&$| C«/button» 
«/div» 
«script» 
var app = new Vue(í 
el: '#app', 
components: { 
comA: ( 
template: ' <div> 组 件 A«/div»' 
}, 
comB: { 
template: '<div> 组 件 B</div>' 
} ， 
comC: 并 
template: '<div> 组 件 c</div>' 


), 
data: { 
currentView: 'comA' 
), 
methods: { 


handleChangeView: function (component) { 
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this.currentView = 'com' + component; 


}) 


«/script» 


动态 地 改变 currentView 的 值 就 可 以 动态 挂 载 组 件 了 。 也 可 以 直接 绑 定 在 组 件 对 象 上 : 
«div id-"app"» 
«component :is-"currentView"»«/component» 
«/div» 
«script» 
var Home = { 
template: '«p»Welcome home!c«/p»' 
}; 
var app = new Vue(í 
el: 'fapp', 
data: { 


currentView: Home 


)) 


«/script» 


7.5.4 异步 组 件 


当 你 的 工程 足够 大 ， 使 用 的 组 件 足 够 多 时 ， 是 时 候 考 虑 下 性 能 问题 了 ， 因 为 一 开始 把 所 有 的 
组 件 都 加 载 是 没 必要 的 一 笔 开 销 。 好 在 Vue.js 允许 将 组 件 定义 为 一 个 工厂 函数 , 动态 地 解析 组 件 。 
Vuejs 只 在 组 件 需 要 泻 染 时 触发 工厂 函数 ， 并 且 把 结果 缓存 起 来 ， 用 于 后 面 的 再 次 泻 染 。 例 如 下 
面 的 示例 : 


<div id="app"> 
<child-component></child-component> 
</div> 
«script» 
Vue.component('child-component', function (resolve, reject) { 
window.setTimeout(function () { 
resolve(( 
template: '<div> 我 是 异步 演 染 的 </div>' 
)); 
), 2000); 
)); 


var app = new Vue(í 
el: 'f£fapp' 
)) 


«/script» 
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工厂 函数 接收 一 个 resolve 回调 ， 在 收 到 从 服务 器 下 载 的 组 件 定 义 时 调用 。 也 可 以 调用 
reject(reason) 指 示 加 载 失败 。 这 里 setTimeout 只 是 为 了 演示 异步 ， 具 体 的 下 载 逻 辑 可 以 自己 决定 ， 
比如 把 组 件 配置 写成 一 个 对 象 配置 ， 通 过 Ajax 来 请 求 ， 然 后 调用 resolve 传 入 配置 选项 。 

在 进 阶 篇 里 ， 我 们 还 会 介绍 主流 的 打包 编译 工具 webpack 和 .vue 单 文 件 的 用 法 ， 更 优雅 地 实 
现 异 步 组 件 〈 路 由 ) 。 


7.6 其 他 


7.6.1 SnextTick 


我 们 先 来 看 这 样 一 个 场景 : 有 一 个 div， 默 认 用 v- 计 将 它 隐 藏 ， 点 击 一 个 按钮 后 ， 改 变 vif f 
值 ， 让 它 显示 出 来 ， 同 时 拿 到 这 个 div 的 文本 内 容 。 如 果 v- 直 的 值 是 false， 直 接 去 获取 div 的 内 容 
是 获取 不 到 的 ， 因 为 此 时 div 还 没有 被 创建 出 来 ， 那 么 应 该 在 点 击 按钮 后 ， 改 变 Vv- 下 的 值 为 true, 
div 才 会 被 创建 ， 此 时 再 去 获取 ， 示 例 代码 如 下 : 


«div id="app"> 
«div id-"div" VvV-if="showDiv"> 这 是 一 段 文本 </div> 
«button click="gqetText"> 获 取 div 内 容 </button> 
«/div» 
«script» 
var app - new Vue(í 
el: '4app', 
data: { 
showDiv: false 
), 
methods: { 
getText: function () { 
this.showDiv - true; 
var text = document.getElementById('div').innerHTML; 


console.log(text); 


} 
}) 


«/script» 


这 段 代 码 并 不 难 理解 , 但 是 运行 后 在 控制 台 会 抛 出 一 个 错误 : Cannot read property 'innerHTML' 
ofnull， 意 思 就 是 获取 不 到 div 元 素 。 这 里 就 涉及 Vue 一 个 重要 的 概念 : 异步 更 新 队列 。 

Vue 在 观察 到 数据 变化 时 并 不 是 直接 更 新 DOM， 而 是 开启 一 个 队列 ， 并 缓冲 在 同一 事件 循环 
中 发 生 的 所 有 数据 改变 。 在 缓冲 时 会 去 除 重 复数 据 ， 从 而 避免 不 必要 的 计算 和 DOM 操作 。 然 后， 
在 下 一 个 事件 循环 tick P, Vue 刷新 队列 并 执行 实际 (已 去 重 的 ) 工作 。 所 以 如 果 你 用 一 个 for t 
环 来 动态 改变 数据 100 次 , 其 实 它 只 会 应 用 最 后 一 次 改变 , 如 果 没 有 这 种 机 制 , DOM 就 要 重 绘 100 
次 ， 这 固然 是 一 个 很 大 的 开销 。 
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Vue 会 根据 当前 浏览 器 环境 优先 使 用 原生 的 Promise.then 和 MutationObserver, 如 果 都 不 支持 ， 
就 会 采用 setTimeout 代替 。 

知道 了 Vue 异步 更 新 DOM 的 原理 ， 上 面 示 例 的 报错 也 就 不 难 理解 了 。 事 实 上， 在 执行 
this.showDiv = true; 时 ，div 仍然 还 是 没有 被 创建 出 来 ， 直 到 下 一 个 Vue 事件 循环 时 ， 才 开始 创建 。 
$nextTick 就 是 用 来 知道 什么 时 候 DOM 更 新 完成 的 ， 所 以 上 面 的 示例 代码 需要 修改 为 : 


«div id="app"> 
«div id-"div" v-if="showDiv"> 这 是 一 段 文本 </div> 
«button @click="getText"> 获 取 div 内 容 </button> 
</div> 
<script> 
var app = new Vue(í 
el: '4app', 
data: { 
showDiv: false 
), 
methods: ( 
getText: function () { 
this.showDiv = true; 
this.$nextTick(function () { 
var text = document.getElementById('div').innerHTML; 
console.log (text); 


}); 


} 
}) 
</script> 


这 时 再 点 击 按钮 ， 控 制 台 就 打印 出 div 的 内 容 “ 这 是 一 段 文本 ”了 。 

理论 上 ， 我 们 应 该 不 用 去 主动 操作 DOM， 因 为 Vue 的 核心 思想 就 是 数据 驱动 DOM， 但 在 很 
多 业务 里 ， 我 们 避免 不 了 会 使 用 一 些 第 三 方 库 ， 比 如 popperjs (https://popper.js.org/) ~ swiper 
Chttp://idangero.us/swiper/) 等 ， 这 些 基于 原生 JavaScript 的 库 都 有 创建 和 更 新 及 销毁 的 完整 生命 周 
期 ， 与 Vue 配合 使 用 时 ， 就 要 利用 好 $nextTick 。 


7.6.2 X-Templates 


如 果 你 没有 使 用 webpack、gulp 等 工具 ， 试 想 一 下 你 的 组 件 template 的 内 容 很 元 长 、 复 杂 ， 如 
果 都 在 JavaScript 里 拼接 字符 串 ， 效 率 是 很 低 的 ， 因 为 不 能 像 写 HTML 那样 舒服 。Vue EETA 
一 种 定义 模板 的 方式 ， 在 <script> 标签 里 使 用 text/x-template 类 型 ， 并且 指定 一 个 id, 将 这 个 1d IR 
给 template。 示 例 代 码 如 下 : 
«div id="app"> 
«my-component»«/my-component» 


«script type-"text/x-template" id-"my-component"» 
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<div> 这 是 组 件 的 内 容 </div> 
«/script» 
«/div» 
«script» 
Vue.component('my-component', { 
template: '4my-component' 


)); 


var app - new Vue(í 
el: 'f£fapp' 
)) 


«/script» 


在 <script> 标签 里 ， 你 可 以 愉快 地 写 HTML 代码 ， 不 用 考虑 换行 等 问题 。 

很 多 刚 接触 Vue 开发 的 新 手 会 非常 喜欢 这 个 功能 ， 因 为 用 它 ， 再 加 上 组 件 知 识 ， 就 可 以 很 轻 
松 地 完成 交互 相对 复杂 的 页 面 和 应 用 了 。 如 果 再 配合 一 些 构建 工具 (gulp) 组 织 好 代码 结构 ， 开 发 
一 些 中 小 型 产品 是 没有 问题 的 。 不 过 ，Vnue 的 初衷 并 不 是 滥用 它 ， 因 为 它 将 模板 和 组 件 的 其 他 定义 
隔离 了 。 在 进 阶 篇 里 ,我们 会 介绍 如 何 使 用 webpack 来 编译 vue 的 单 文件 , 从 而 优雅 地 解决 HTML 
书写 的 问题 。 


7.6.3 ”手动 挂 载 实例 


我 们 现在 所 创建 的 实例 都 是 通过 new Vue0 的 形式 创建 出 来 的 。 在 一 些 非常 特殊 的 情况 下 ， 我 
们 需要 动态 地 去 创建 Vue 实例 ，Vue 提供 了 Vue.extend 和 $mount 两 个 方法 来 手动 挂 载 一 个 实例 。 

Vue.extend 是 基础 Vue 构造 器 ， 创 建 一 个 “ 子 类 ”， 参 数 是 一 个 包含 组 件 选项 的 对 象 。 

如 果 Vue 实例 在 实例 化 时 没有 收 到 el 选项 ， 它 就 处 于 “未 挂 载 ” 状 态 ， 没 有 关联 的 DOM 元 
素 。 可 以 使 用 $mountO 手 动 地 挂 载 一 个 未 挂 载 的 实例 。 这 个 方法 返回 实例 自身 ， 因 而 可 以 链 式 调用 
其 他 实例 方法 。 示 例 代 码 如 下 : 


«div id-"mount-div"» 


«/div» 
«script» 
var MyComponent = Vue.extend((í 
template: '«div»Hello: {{ name }}</div>', 
data: function () { 
return { 
name: 'Aresn' 


) 
)); 


new MyComponent () .Smount ('tmount-div'); 


«/script» 
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运行 后 ，id 为 mount-div 的 div 元 素 会 被 蔡 换 为 组 件 MyComponent 的 template 的 内 容 : 
<div>Hello: Aresn</div> 
除了 这 种 写法 外 ， 以 下 两 种 写法 也 是 可 以 的 : 
new MyComponent ().9mount('4mount-div'); 
// 同上 
new MyComponent((í( 
el: '4mount-div' 


2: 
// 或 者 ， 在 文档 之 外 泻 染 并 且 随 后 挂 载 


var component = new MyComponent () .Smount () ; 


document.getElementById( mount-div').appendChild (component.$el); 


手动 挂 载 实 例 组件) 是 一 种 比较 极端 的 高 级 用 法 ， 在 业务 中 几乎 用 不 到 ， 只 在 开发 一 些 复 
杂 的 独立 组 件 时 可 能 会 使 用 ， 所 以 只 做 了 解 就 好 。 


7.7 实战: 两 个 常用 组 件 的 开发 


本 节 以 组 件 知识 为 基础 ， 整 合 指令 、 事 件 等 前 面 章 节 的 内 容 ， 开 发 两 个 业务 中 常用 的 组 件 ， 
即 数字 输入 框 和 标签 页 。 


7.7.1 开发 一 个 数字 输入 框 组 件 
数字 输入 框 是 对 普通 输入 框 的 扩展 ， 用 来 快捷 输入 一 个 标准 的 数字 ， 如 图 7-6 所 示 。 


7-6 数字 输入 框 


数字 输入 框 只 能 输入 数字 ， 而 且 有 两 个 快捷 按钮 ， 可 以 直接 减 1 或 加 1。 除 此 之 外 ， 还 可 以 
设置 初始 值 、 最 大 值 、 最 小 值 ， 在 数值 改变 时 ， 触 发 一 个 自 定 义 事件 来 通知 父 组 件 。 

了 解 了 基本 需求 后 ， 我 们 先 定义 目录 文件 : 

e index.html 入 口 页 

e input-numberjs 数字 输入 框 组 件 

e indexjs 根 实 例 

因为 该 示例 是 以 交互 功能 为 主 ， 所 以 就 不 写 CSS 美化 样式 了 。 

首先 写 入 基本 的 结构 代码 ， 初 始 化 项 目 。 
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index.html: 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
<title> 数 字 输 入 框 组 件 </title> 
</head> 
<body> 


<div id="app"> 


</div> 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"input-number.js"»«/script» 
«script src-"index.js"»«/script» 
«/body» 
«/html» 


index.js: 


var app = new Vue(í 
el: '#app' 
)); 


input-number js : 


Vue.component('input-number', { 
template: '\ 
«div class-"input-number"» \ 
\ 
«/div»', 
props: ( 
max: { 
type: Number, 
default: Infinity 
b, 
min: { 
type: Number, 
default: -Infinity 
), 
value: { 
type: Number, 
default: 0 


)); 


99 


100 第 1 篇 ”基础 篇 


该 示例 的 主角 是 inputnumberjs， 所 有 的 组 件 配置 都 在 这 里 面 定义 。 先 在 template 里 定义 了 组 
件 的 根 节 点 ， 因 为 是 独立 组 件 ， 所 以 应 该 对 每 个 prop 进行 校 验 。 这 里 根据 需求 有 最 大 值 、 最 小 值 、 
默认 值 (也 就 是 绑 定 值 )3 个 prop, max 和 min 都 是 数字 类 型 , 默认 值 是 正 无 限 大 和 负 无 限 大 ; value 
也 是 数字 类 型 ， 默 认 值 是 0。 

接 下 来 , 我们 先 在 父 组 件 引 入 input-number 组 件 ， 并 给 它 一 个 默认 值 5, 最 大 值 10, 最 小 值 0。 


index.js : 


var app = new Vue(í 
el: '#app', 
data: { 


value: 5 


)); 
index.html: 


«div id-"app"» 
«input-number v-model-"value" :max-"10" :min-"0"»«/input-number» 


«/div» 


value 是 一 个 关键 的 绑 定 值 ， 所 以 用 了 v-model， 这 样 既 优雅 地 实现 了 双向 绑 定 ， 也 让 API 看 
起 来 很 合理 。 大 多 数 的 表单 类 组 件 都 应 该 有 一 个 v-model， 比 如 输入 框 、 单 选 杠 、 多 选 杠 、 下 拉 选 
择 器 等 。 

剩余 的 代码 量 就 都 聚焦 到 了 input-number.js 上 。 

我 们 之 前 介绍 过 ，Vue 组 件 是 单身 数 据 流 ， 所 以 无 法 从 组 件 内 部 直接 修改 prop value 的 值 。 
解决 办 法 也 介绍 过 , 就 是 给 组 件 声明 一 个 data, 默认 引用 value 的 值 ,然后 在 组 件 内 部 维护 这 个 data: 


Vue.component('input-number', { 
FP pas 
data: function () { 
return ( 
currentValue: this.value 


) 


)) 


这 样 只 解决 了 初始 化 时 引用 父 组 件 value 的 问题 ,但 是 如 果 从 父 组 件 修 改 了 value,input-number 
组 件 的 currentValue 也 要 一 起 更 新 .为 了 实现 这 个 功能 , 我 们 需要 用 到 一 个 新 的 概念 :监听 (watch ) 。 
watch 选项 用 来 监听 某 个 prop 或 data 的 改变 ， 当 它们 发 生变 化 时 ， 就 会 触发 watch 配置 的 函数 ， 
从 而 完成 我 们 的 业务 逻辑 。 在 本 例 中 ， 我们 要 监听 两 个 量 : value 和 currentValue。 监 听 value 是 要 
知晓 从 父 组 件 修 改 了 value， 监 听 currentValue 是 为 了 当 currentValue 改变 时 ， 更 新 value。 相 关 代 
码 如 下 : 
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Vue.component('input-number', { 
FÉ ss 
data: function () { 
return { 


currentValue: this.value 


), 
watch: { 
currentValue: function (val) { 
this.S$emit('input', val); 
this.Semit('on-change', val); 
} ， 


value: function (val) { 


this.updateValue (val); 


), 
methods: { 
updateValue: function (val) { 
if (val » this.max) val - this.max; 
if (val < this.min) val = this.min; 


this.currentValue - val; 


}, 
mounted: function () { 


this.updateValue (this.value); 


}) 


从 父 组 件 传 递 过 来 的 value 有 可 能 是 不 符合 当前 条 件 的 (大 于 max， 或 小 于 min) ， 所 以 在 选 
项 methods 里 写 了 一 个 方法 updateValue， 用 来 过 滤 出 一 个 正确 的 currentValue。 

watch 监听 的 数据 的 回调 函数 有 2 个 参数 可 用 ， 第 一 个 是 新 的 值 ， 第 二 个 是 旧 的 值 ， 这 里 没有 
太 复 杂 的 逻辑 ， 就 只 用 了 第 一 个 参数 。 在 回调 函数 里 ，this 是 指向 当前 组 件 实例 的 ， 所 以 可 以 直接 
调用 this.updateValue() ， 因 为 Vue 代理 了 props. data ~ computed 及 methods. 

监听 currentValue 的 回调 里 ，this.$emit(input'，vaj) 是 在 使 用 v-model 时 改变 value 的 ; 
this.$emit('on-change', val) 是 触发 日 定义 事件 on-change， 用 于 告知 父 组 件数 字 输 入 框 的 值 有 所 改变 

(示例 中 没有 使 用 该 事件 〉。 

在 生命 周期 mounted £3 T- Et 13H] f updateValueQ77 3X; 是 因为 第 一 次 初始 化 时 ,也 对 value 进 
行 了 过 滤 。 这 里 也 有 男 一 种 写法 ， 在 data 选项 返回 对 象 前 进行 过 滤 : 

Vue.component('input-number', { 

FÉ sas 


data: function () { 


var val - this.value; 
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if (val > this.max) val this.max; 


if (val « this.min) val - this.min; 


return { 


currentValue: val 


实现 的 效果 是 一 样 的 。 
最 后 剩余 的 就 是 补 全 模板 template， 内 容 是 一 个 输入 框 和 两 个 按钮 ， 相 关 代 码 如 下 : 


function isValueNumber (value) { 
return (/(^-?[0-9]*N. (1) Nd*$) | (^-?2[1-9] [0-9] *$) | (^-20(1)]$) /) . test (value 
£o) 


) 


Vue.component('input-number', { 
H ss 
template: '\ 
«div class-"input-number"» V 
«input V 
type="text" VN 
:value-"currentValue" \ 
QGchange-"handleChange"» V 
«button ^ 
Qclick-"handleDown" \ 
:disabled-"currentValue <= min"»-«/button» \ 
«button ^ 
Qclick-"handleUp" \ 
:disabled-"currentValue >= max"»-«/button» \ 
cfdTu t. 
methods: ( 
handleDown: function () { 
if (this.currentValue «- this.min) return; 
this.currentValue -- 1; 
} ， 
handleUp: function () { 
if (this.currentValue >= this.max) return; 
this.currentValue += 1; 
), 
handleChange: function (event) { 


var val = event.target.value.trim(); 
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var max - this.max; 


var min - this.min; 


if (isValueNumber(val)) { 
val = Number (val); 


this.currentValue - val; 


if (val > max) { 
this.currentValue - max; 
} else if (val < min) { 
this.currentValue - min; 
} 
) eise { 


event.target.value = this.currentValue; 


} 
)); 


input 绑 定 了 数据 currentValue 和 原生 的 change 事件 ， 在 句柄 handleChange 函数 中 ， 判 断 了 
当前 输入 的 是 否 是 数字 。 注 意 ， 这 里 绑 定 的 currentValue 也 是 单 向 数据 流 ， 并 没有 用 v-model， 所 
以 在 输入 时 ，currentValue 的 值 并 没有 实时 改变 。 如 果 输 入 的 不 是 数字 〈 比 如 英文 和 汉字 等 ) ， 就 
将 输入 的 内 容重 置 为 之 前 的 curentValue。 如 果 输 入 的 是 符合 要 求 的 数字 ， 就 把 输入 的 值 赋 给 
currentValue. 

Zr iN ETHER EROR AR LAXE. [RIS FRIA TRU HH TERI ABER. Tro. TES 
代码 前 一 定 要 明确 需求 ， 然 后 规划 好 API. —^^ Vue 组件 的 API 只 来 自 props. events 和 slots, fff 
定好 这 3 部 分 的 命名 、 规 则 ， 剩 下 的 逻辑 即使 第 一 版 没有 做 好 ， 后 续 也 可 以 友 代 完善 。 但 是 API 
如 果 没 有 设计 好 ， 后 续 再 改 对 使 用 者 成 本 就 很 大 了 。 

完整 的 示例 代码 如 下 : 


index.html 


<!DOCTYPE html» 
<html> 
<head> 
«meta charset-"utf-8"» 
<title> 数 字 输 入 框 组 件 </title> 
</head> 
<body> 
«div id="app"> 
«input-number v-model-"value" :max-"10" :min="0"></input-number> 
«/div» 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
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«script src-"input-number.js"»«/script» 
«script src-"index.js"»«/script» 
«/body» 
«/html» 


index.js 


var app = new Vue(í 
el: '4app', 
data: { 


value: 5 


)); 
input-number.js 


function isValueNumber (value) { 
return (/(^-?[0-9]*N. (1) Nd*$) | (^-?2[1-9] [0-9] *$) | (^-20(1)$) /) . test (value 
libe i: 


) 


Vue.component('input-number', { 
template: '\ 
«div class-"input-number"» V 
«input ^ 
type="text" V 
:value-"currentValue" \ 
Qchange-"handleChange"» V 
«button V 
Qclick-"handleDown" \ 
:disabled-"currentValue <= min"»-«/button» \ 
«button V 
Qclick-"handleUp" \ 
:disabled-"currentValue >= max"»-«/button» \ 
< GE 
props: { 
max: { 
type: Number, 
default: Infinity 
} ， 
min: { 
type: Number, 
default: -Infinity 
), 


value: { 
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type: Number, 
default: O0 


), 


data: function () 4 
return ( 


currentValue: this.value 


}, 
watch: { 
currentValue: function (val) { 
this.S$emit('input', val); 
this.Semit('on-change', val); 
), 
value: function (val) { 


this.updateValue (val); 


), 
methods: { 
handleDown: function () { 
if (this.currentValue «- this.min) return; 
this.currentValue -- 1; 
), 
handleUp: function () { 
if (this.currentValue »- this.max) return; 
this.currentValue t= 1; 
), 
updateValue: function (val) { 
if (val » this.max) val - this.max; 
if (val < this.min) val = this.min; 
this.currentValue - val; 
), 
handleChange: function (event) { 


var val = event.target.value.trim(); 


var max = this.max; 


var min = this.min; 
if (isValueNumber(val)) { 
val = Number (val); 


this.currentValue - val; 


if (val » max) 4 
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this.currentValue - max; 
} else if (val < min) { 
this.currentValue - min; 
} 
} else { 
event.target.value = this.currentValue; 
} 
} 
}， 
mounted: function () { 
this.updateValue (this.value); 
} 
)); 


练习 1: 在 输入 框 聚 焦 时 ， 增 加 对 键盘 上 下 按键 的 支持 ， 相 当 于 加 1 和 减 1. 
练习 2: 增加 一 个 控制 步伐 的 prop 一 step， 比 如 设置 为 10， 点 击 加 号 按钮 ， 一 次 增加 10。 


7.1.2. 开发 一 个 标签 页 组 件 


本 小 节 将 开发 一 个 比较 有 挑战 的 组 件 ， 标签 页 组 件 。 标 签 页 〈 即 选项 卡 切换 组 件 ) 是 网 页 布 
局 中 经 音 用 到 的 元 素 ， 币 用 于 平 级 区 域 大 块 内 容 的 收纳 和 展现 ， 如 图 7-7 所 示 。 


标签 一 标签 二 标签 二 


标签 一 的 内 容 





7-7 标签 页 


根据 上 个 示例 的 经 验 ， 我 们 先 分 析 业 务 需 求 ， 制 定 出 API， 这 样 不 至 于 一 上 来 就 无 从 下 手 。 

每 个 标签 页 的 主体 内 容 肯 定 是 由 使 用 组 件 的 父 级 控制 的 ， 所 以 这 部 分 是 一 个 slot， 而 且 slot 
的 数量 决定 了 标签 切换 按钮 的 数量 。 假设 我 们 有 3 个 标签 页 ， 点 击 每 个 标签 按钮 时 ， 另 外 的 两 个 标 
签 对 应 的 slot 应 该 被 隐藏 掉 。 一 般 这 个 时 候 ， 比 较 容 易 想 到 的 解决 办 法 是 ， 在 slot 里 写 3 个 div, 
在 接收 到 切换 通知 时 ， 显 示 和 隐藏 相关 的 div。 这 样 设计 没有 问题 ， 只 不 过 体现 不 出 组 件 的 价值 来 ， 
因为 我 们 还 是 写 了 一 些 与 业务 无 关 的 交互 逻辑 , 而 这 部 分 逻辑 最 好 组 件 本 号 帮忙 处 理 了 , 我 们 只 用 
聚焦 在 slot 内 容 本 身 ， 这 才 是 与 我 们 业务 最 相关 的 。 这 种 情况 下 ， 我 们 再 定义 一 个 子 组 件 pane; 
REEERE KIHI tabs E, 我 们 的 业务 代码 都 放 在 pane 的 slot 内 ,而 3 个 pane 组 件 作 为 整体 成 为 
tabs 的 slot。 

由 于 tabs 和 pane 两 个 组 件 是 分 离 的 ， 但 是 tabs 组 件 上 的 标题 应 该 由 pane 组 件 来 定义 ， 因 为 
slot 是 写 在 pane 里 ， 因 此 在 组 件 初始 化 (及 标签 标题 动态 改变 ) 时 ，tabs 要 从 pane 里 获取 标题 ， 
并 保存 起 来 ， 自 己 使 用 。 
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确定 好 了 结构 ， 我 们 先 创建 所 需 的 文件 : 


e index.html 入 口 页 

e stylecss 样式 表 

e tabsjs 标签 页 外 层 的 组 件 tabs 
e panejs 标签 页 府 套 的 组 件 pane 
先 初始 化 各 个 文件 。 

index.html: 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
<title> 标 签 页 组 件 </title> 
«link rel="stylesheet" type-"text/css" href="style.css"> 
</head> 
<body> 


«div id-"app" v-cloak» 


«/div» 

«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"pane.js"»«/script» 

«script src-"tabs.js"»«/script» 

«script type-"text/javascript"» 


var app = new Vue(í( 


el: '#app' 
}) 
</script> 
</body> 
</html> 
tabs Js: 


Vue.component('tabs', { 
template: '\ 
«div class-"tabs"» V 

«div class-"tabs-bar"» VN 
«1-- 标签 页 标题 ， 这 里 要 用 v-for --> \ 

«/div» \ 

«div class-"tabs-content"» V 
«1-- 这 里 的 slot MEREK pane --» \ 
«slot»«/slot» \ 

</div> N 
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</div>! 


}) 
pane js: 


Vue.component('pane', { 
name: 'pane', 
template: '\ 
«div class-"pane"» VN 
«slot»«/slot» V 
</div>" 


)) 
pane 需要 控制 标签 页 内 容 的 显示 与 隐藏 , 设置 一 个 data: show; 并 且 用 v-show 指令 来 控制 元 素 : 


template: '\ 
«div class-"pane" v-show-"show"» \ 
«slot»«/slot» \ 
«/div»', 
data: function () { 
return { 
show: true 
} 
} 


当 点 击 到 这 个 pane 对 应 的 标签 页 标题 按钮 时 , 此 pane 的 show 值 设置 为 true, 否则 应 该 是 false, 
这 步 操 作 是 在 tabs 组 件 完 成 的 ， 我 们 稍 后 再 介绍 。 

既然 要 点 击 对 应 的 标签 页 标题 按钮 ， 那 应 该 有 一 个 唯一 的 值 来 标识 这 个 pane， 我 们 可 以 设置 
一 个 prop: name 让 用 户 来 设置 ， 但 它 不 是 必需 的 ， 如 果 使 用 者 不 设置 ， 可 以 默认 从 0 开始 自动 设 
置 ， 这 步 操作 仍然 是 tabs 执行 的 ， 因 为 pane 本 和 喘 并 不 知道 自己 是 第 儿 个 。 除 了 name， 还 需要 标 
签 页 标题 的 prop: label, tabs 组 件 需要 将 它 显 示 在 标签 页 标题 里 。 这 部 分 代码 如 下 : 


props: { 
name: { 
type: String 
), 
label: { 
type: String, 
default: '' 


} 


上 面 的 prop: label 用 户 是 可 以 动态 调整 的 ， 所 以 在 pane 初始 化 及 label 更 新 时 ， 都 要 通知 父 
组 件 也 更 新 ， 因 为 是 独立 组 件 ， 所 以 不 能 依赖 像 bus.js 或 vuex 这 样 的 状态 管理 办 法 ， 我 们 可 以 直 
接 通 过 this.$parent 访问 tabs 组 件 的 实例 来 调用 它 的 方法 更 新 标题 ,该 方法 名 暂 定 为 updateNav。 7X 
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意 ， 在 业务 中 尽 可 能 不 要 使 用 $parent 来 操作 父 链 ， 这 种 方法 适合 于 标签 页 这 样 的 独立 组 件 。 这 部 
分 代码 如 下 : 


methods: { 
updateNav () ( 
this.$parent.updateNav(); 


}, 
watch: { 
label () { 
this.updateNav(); 


), 
mounted () { 


this.updateNav (); 
} 


在 生命 周期 mounted， 也 就 是 pane 初始 化 时 ， 调 用 一 遍 tabs 的 updateNav 方法 ， 同 时 监听 了 
prop: label， 在 label 更 新 时 ， 同 样 调用 。 

Jal FE OS LIS: y FX, tabs.js 组 件 。 

首先 需要 把 pane 组 件 设置 的 标题 动态 浑 染 出 来 ,也 就 是 当 pane 触发 tabs 的 updateNav 方法 时 ， 
更 新 标题 内 容 。 我 们 先 看 一 下 这 部 分 的 代码 : 


Vue.component('tabs', { 
Fi aaa 
data: function () { 
return { 


// 用 于 演 染 tabs 的 标题 


navList: [] 


), 
methods: { 
getTabs () { 
// 通过 遍历 子 组 件 ， 得 到 所 有 的 pane 组 件 
return this.$children.filter(function (item) { 
return item.$options.name === 'pane'; 
)); 
} ， 
updateNav () { 
this.navList = [l]; 
// RAX this 的 引用 ， 在 function [BUR B, tnis 指向 的 并 不 是 vue 实例 


var this - this; 


this.getTabs().forEach(function (pane, index) { 
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 this.navList.push(í 
label: pane.label, 
name: pane.name || index 
)); 
// 如 果 没 有 给 pane WE name， 默 认 设置 它 的 索引 
if (!pane.name) pane.name - index; 


// 设置 当前 选中 的 cab 的 索引 ， 在 后 面 介 绍 
if (index === 0) { 
if (! this.currentValue) { 
 this.currentValue = pane.name || index; 


} 
}); 


this.updateStatus(); 
), 
updateStatus () { 
var tabs = this.getTabs(); 
var this = this; 
// 显示 当前 选中 的 tab 对 应 的 pane 组 件 ， 隐 藏 没有 选中 的 
tabs.forEach(function (tab) { 
return tab.show = tab.name ===  this.currentValue; 


)) 


)) 


getTabs 是 一 个 公用 的 方法 ， 使 用 this.$children 来 拿 到 所 有 的 pane 组 件 实例 。 

需要 注意 的 是 , 在 methods 里 使 用 了 有 function 回调 的 方法 时 (例如 遍历 数组 的 方法 forEach)， 
在 回调 内 的 this 不 再 执行 当前 的 Vue 实例 ,也 就 是 tabs 组 件 本 身 ,所 以 要 在 外 层 设置 一 个 _this = this 
的 局 部 变量 来 间接 使 用 this。 如 果 你 熟悉 ES2015, 也 可 以 直接 使 用 箭头 函数 => ,我 们 会 在 实战 篇 
里 介绍 相关 的 用 法 。 

遍历 了 每 一 个 pane 组 件 后 ， 把 它 的 label 和 name 提取 出 来 ， 构 成 一 个 Object 并 添加 到 数据 
navList 数组 里 ， 后 面 我 们 会 在 template 里 用 到 它 。 

设置 完 navList 数组 后 ， 我 们 调用 了 updateStatus 方法 ， 又 将 pane 组 件 遍 历 了 一 遍 ， 不 过 这 时 


是 为 了 将 当前 选中 的 tab 对 应 的 pane 组 件 内 容 显示 出 来 ， 把 没有 选中 的 隐藏 掉 。 因 为 在 上 一 步 操 
作 里 ， 我 们 有 可 能 需要 设置 currentValue 来 标识 当前 选中 项 的 name (在 用 户 没 有 设置 value 时 ， 才 


会 自动 设置 ) ， 所 以 必须 要 遍历 2 次 才 可 以 。 
拿 到 navList 后 ， 就 需要 对 它 用 v-for 指令 把 tab 的 标题 泻 染 出 来 ， 并 且 判 断 每 个 tab 当前 的 状 
态 。 这 部 分 代码 如 下 : 


Vue.component('tabs', { 


template: '\ 
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«div class-"tabs"» \ 
«div class-"tabs-bar"» V 
«div ^ 


:class-"tabCls(item)" \ 


v-for=" (item, index) in navList" \ 


Qclick-"handleChange (index)"» V 
{{ item.label }} \ 
</div> \ 
</div> \ 
<div class="tabs-content"> \ 
«slot»«/slot» \ 
«/div» N 
< GT 
props: { 
// 这 里 的 value 是 为 了 可 以 使 用 v-mode1l 
value: { 


type: [String, Number] 


), 
data: function () { 
return ( 
// 因为 不 能 修改 value， 所 以 复制 一 份 自己 维护 
currentValue: this.value, 


navList: [] 


), 
methods: { 
tabCls: function (item) { 
return [ 
'tabs-tab', 
i 
// 给 当前 选中 的 cab 加 一 个 class 


'tabs-tab-active': item.name === 


), 
// 点 击 tab 标题 时 触发 
handleChange: function (index) { 
var nav — this.navList[index]; 
var name = nav.name; 
// 改变 当前 选中 的 tab ， 并 触发 下 面 的 watch 


this.currentValue - name; 


// Æ% value 


this.currentValue 
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this.S$Semit('input', name); 
// 触发 一 个 自 定 义 事件 ， 供 父 级 使 用 


this.S$emit('on-click', name); 


), 
watch: { 
value: function (val) { 
this.currentValue - val; 


), 


currentValue: function () { 


// 在 当前 选中 的 tab 发 生变 化 时 ， 更 新 pane 的 显示 状态 


this.updateStatus(); 


)) 


在 使 用 v-for 指令 循环 显示 tab 标题 时 ， 使 用 v-bind:class 指向 了 一 个 名 为 tabCls 的 methods 来 
动态 设置 clas 名 称 。 因 为 计算 属性 不 能 接收 参数 ， 无 法 知道 当前 tab 是 否 是 选中 的 ， 所 以 这 里 我 
们 才 用 到 methods， 不 过 要 知道 ，methods 是 不 缓存 的 ， 可 以 回顾 关于 计算 属性 的 章节 。 

点 击 每 个 tab 标题 时 ， 会 触发 handleChange 方法 来 改变 当前 选中 tab 的 索引 ， 也 就 是 pane 组 
件 的 name。 在 watch 选项 里 ， 我 们 监听 了 currentValue， 当 其 发 生变 化 时 ， 触 发 updateStatus 方法 
来 更 新 pane 组 件 的 显示 状态 。 

以 上 就 是 标签 页 组 件 的 核心 代码 分 解 。 总 结 一 下 该 示例 的 技术 难点 : 使 用 了 组 件 诅 套 的 方式 ， 
将 一 系列 pane 组 件 作 为 tabs 组 件 的 slot; tabs 组 件 和 pane 组 件 通 信 上 ， 使 用 了 $parent 和 $children 
的 方法 访问 父 链 和 子 链 ; 定义 了 prop: value 和 data: currentValue, 使 用 $emit(input") 来 实现 v-model 
的 用 法 。 

以 下 是 标签 页 组 件 的 完整 代码 。 


index.html: 


<!DOCTYPE html» 
«html» 
«head» 

«meta charset-"utf-8"» 

<title> 标 签 页 组 件 </title> 

<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 

«div id-"app" v-cloak> 

«tabs v-model-"activeKey"» 
«pane label=" 标 签 一 " name-"1"-» 
标签 一 的 内 容 


</pane> 
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«pane label=" 标 签 二 " name-"2"» 
标签 二 的 内 容 
</pane> 
«pane label=" 标 签 三 " name="3"> 
标签 三 的 内 容 
</pane> 
</tabs> 
</div> 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"pane.js"»«/script» 
«script src-"tabs.js"»«/script» 
«script type-"text/javascript"» 
var app = new Vue({ 
el: '#app', 
data: ( 


activeKey: '1' 


)) 
«/script» 
«/body» 
«/html» 


pane js: 


Vue.component('pane', { 
name: 'pane', 
template: '\ 

«div class-"pane" v-show-"show"» V 
«slot»«/slot» V 

efdrw»t, 

props: { 

name: ( 
type: String 

- 

label: { 
type: String, 
default: 17 


), 


data: function () { 
return { 


show: true 
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methods: { 
updateNav () ( 
this.$parent.updateNav(); 


}, 
watch: { 
label () ( 
this.updateNav(); 


} ， 


mounted () { 


this.updateNav(); 


)) 
tabs Js: 


Vue.component('tabs', { 
template: '\ 
«div class-"tabs"» V 
«div class-"tabs-bar"» V 
«div \ 
:class-"tabCls(item)" ^ 
v-for-"(item, index) in navList" \ 
Qclick-"handleChange (index)"» V 
(( item.label }} \ 
</div> \ 
«/div» \ 
<div class="tabs-content"> \ 
<slot></slot> \ 
</div> \ 
«/div»', 
props: { 
value: { 


type: [String, Number] 


} ， 
data: function () { 
return { 
currentValue: this.value, 


navList: [] 


}, 
methods: { 
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tabCls: function (item) { 
return [ 
'tabs-tab', 
{ 


'tabs-tab-active': item.name === this.currentValue 


- 
getTabs () { 
return this.$children.filter(function (item) { 


return item.$options.name === 'pane'; 


)); 
), 
updateNav () { 


this.navList = []; 


var this = this; 


this.getTabs().forEach(function (pane, index) { 
| this.navList.push(í 
label: pane.label, 
name: pane.name || index 
)); 


if (!pane.name) pane.name - index; 


if (index === 0) { 
if (! this.currentValue) { 
 this.currentValue = pane.name || index; 


this.updateStatus(); 


), 
updateStatus () ( 
var tabs = this.getTabs(); 


var this — this; 


tabs.forEach(function (tab) { 
return tab.show = tab.name ===  this.currentValue; 


)) 
), 


handleChange: function (index) { 
var nav — this.navList[index]; 


Var name = nav.name; 
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this.currentValue - name; 
this.S$Semit('input', name); 


this.$emit('on-click', name); 


), 
watch: { 
value: function (val) { 
this.currentValue - val; 
), 
currentValue: function () { 


this.updateStatus(); 


)) 
style.css: 


[v-cloak] { 
display: none; 

} 

.tabsí( 
font-size: l4px; 
color: #657180; 

} 

.tabs-bar:after( 
content: ''; 
display: block; 
width: 1005; 
height: lpx; 
background: 4d7dde4; 
margin-top: -1lpx; 

} 

.tabs-tab{ 
display: inline-block; 
padding: 4px 16px; 
margin-right: 6px; 
background: #fff; 
border: lpx solid #d7dde4; 
cursor: pointer; 
position: relative; 

} 

.tabs-tab-active{ 
color: $3399ff; 
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border-top: lpx solid $3399ff; 

border-bottom: lpx solid 4fff; 
} 
.tabs-tab-active:before( 

content: **2 

display: block; 

height: 1px; 

background: £$3399ff; 


position: absolute; 


top: 0; 
left: 0; 
right: 0; 


} 
.tabs-content ( 
padding: 8px O0; 
} 
练习 1: 给 pane 组 件 新 增 一 个 prop: closable 的 布尔 值 ， 来 支持 是 否 可 以 关闭 这 个 pane. "ul 
RFM, Æ tabs 的 标签 标题 上 会 有 一 个 关闭 的 按钮 。 


Q: 在 初始 化 pane 时 ， 我 们 是 在 mounted 里 通知 的 ， 关 闭 时 ， 你 会 用 到 beforeDestroy. 
提 OIN 

练习 2: 尝 试 在 切换 pane 的 显示 与 隐藏 时 , 使 用 滑动 的 动画 。 提 示 : 可 以 使 用 CSS 3 f] transform: 
translateX 。 


wa 


在 第 5 章 里 我 们 已 经 介绍 过 了 许多 Vue 内 置 的 指令 ， 比 如 v-if、v-show 等 ， 这 些 丰 富 的 内 置 
指令 能 满足 我 们 的 绝 大 部 分 业务 需求 , 不 过 在 需要 一 些 特殊 功能 时 , 我 们 仍然 希望 对 DOM 进行 底 
层 的 操作 ， 这 时 就 要 用 到 自 定 义 指令 。 


8.1 基本 用 法 


自 定义 指令 的 注册 方法 和 组 件 很 像 , 也 分 全 局 注册 和 局 部 注册 , 比如 注册 一 个 v-focus 的 指令 ， 
用 于 在 <input>、<textarea> 元 素 初始 化 时 自动 获得 焦点 ， 两 种 写法 分 别 是 : 
// 全 局 注册 


Vue.directive('focus', { 
/ /指令 选项 
)); 


// 局 部 注册 

var app - new Vue(í 
el: '#app', 
directives: { 


focus: { 


// 指 令 选项 
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写法 与 组 件 基 本 类 似 ， 只 是 方法 名 由 component 改 为 了 directive。 上 例 只 是 注册 了 自 定义 指令 
v-focus， 还 没有 实现 具体 功能 ， 下 面具 体 介 绍 自 定义 指令 的 各 个 选项 。 
自 定 义 指 令 的 选项 是 由 几 个 钩子 函数 组 成 的 ， 每 个 都 是 可 选 的 。 


bind: 只 调用 一 次 ， 指 令 第 一 次 绑 定 到 元 素 时 调用 ， 用 这 个 钧 子 函 数 可 以 定义 一 个 在 绑 定 
时 执行 一 次 的 初始 化 动作 。 

inserted: 被 绑 定 元 素 插入 父 节 点 时 调用 ( 父 节 点 存在 即 可 调用 , 不 必 存 在 于 document 中 ) 。 
update: 被 绑 定 元 素 所 在 的 模板 更 新 时 调用 ， 而 不 论 绑 定 值 是 否 变化 。 通 过 比较 更 新 前 后 
的 绑 定 值 ， 可 以 忽略 不 必要 的 模板 更 新 。 

componentUpdated: 被 绑 定 元 素 所 在 模板 完成 一 次 更 新 周期 时 调用 。 

unbind: 只 调用 一 次 ， 指 令 与 元 素 解 绑 时 调用 。 


可 以 根据 需求 在 不 同 的 钧 子 函 数 内 完成 逻辑 代码 ， 例 如 上 面 的 v-focus， 我 们 硕 望 在 元 素 插入 
父 节 后 时 就 调用 ， 那 用 到 的 最 好 是 inserted。 示 例 代 码 如 下 : 


«div id="app"> 


«input type-"text" v-focus» 


«/div» 


«script» 


Vue.directive('focus', { 
inserted: function (el) { 
// 聚焦 元 素 


el.focus(); 


)); 


var app = new Vue(í( 
el: 'f£app' 
)) 


«/script» 


TET A s P RARU] 8-1 所 示 。 


8-1 v-focus 泻 染 后 的 效果 


可 以 看 到 ， 打 开 这 个 页 面 ，input 输入 框 就 自动 获得 了 焦点 ， 成 为 可 输入 状态 。 
每 个 钩子 函数 都 有 几 个 参数 可 用 ， 比 如 上 面 我 们 用 到 了 el。 它们 的 含义 如 下 : 


e el 指令 所 绑 定 的 元 素 ， 可 以 用 来 直接 操作 DOM. 
e binding 一 个 对 象 ， 包 含 以 下 属性 : 
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> name 指令 名 ， 不 包括 V- 前 级 。 

> value 指令 的 绑 定 值 ， 例 如 Vv-my-directive="1] + 1", value 的 值 是 2。 

> oldValue ”指令 绑 定 的 前 一 个 值 ， 仅 在 update 和 componentUpdated F FTA. AE 
值 是 否 改变 都 可 用 。 

> expression ” 绑 定 值 的 字符 串 形式 ,例如 vV-my-directive="1] + 1", expression 的 值 是 "1 +1". 

arg 传 给 指令 的 参数 。 例 如 v-my-directive:foo, arg 的 值 是 foo. 

> modifiers 一 个 包含 修饰 符 的 对 和 象 。 例 如 v-my-directive.foo.bar， 修 饰 符 对 象 modifiers 
的 值 是 { foo: true, bar: true }。 


e vnode Vue 编译 生成 的 虚拟 节点 ， 在 进 阶 篇 中 介绍 。 
e oldVnode 上 一 个 虚拟 节点 仅 在 update 和 componentUpdated 钩子 中 可 用 。 


下 面 是 结合 了 以 上 参数 的 一 个 具体 示例 ， 代 码 如 下 : 


«div id-"app"» 


v 


«div v-test:msg.a.b-"message"»«/div» 
«/div» 
«script» 
Vue.directive('test', { 
bind: function (el, binding, vnode) { 
var keys - []; 
for (var i in vnode) { 
keys.push (i); 
} 
el.innerHTML - 


'name: ' + binding.name + '«br»' + 

'value: ' + binding.value + '«br»' + 

'expression: ' + binding.expression + '«br»' + 

'argument: ' + binding.arg + '«br»' + 

'modifiers: ' + JSON.stringify(binding.modifiers) + '«br»' + 
'vnode keys: ' + keys.join(', ') 


)); 


var app - new Vue(í 
el: '#app', 
data: { 


message: 'some text' 


}) 


</script> 
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执行 后 ，<div> 的 内 容 会 使 用 innerHTML 重 置 ， 结 果 为 : 


name: test 

value: some text 

expression: message 

argument: msg 

modifiers: [(["a":true,"b":true)] 

vnode keys: 

tag,data,children,text,elm,ns,context,functionalContext,key,componentOpti 
ons,componentInstance,parent,raw,isStatic,isRootInsert,isComment,isCloned,isO 


nce 


在 大 多 数 使 用 场景 ， 我 们 会 在 bid 钩子 里 绑 定 一 些 事件 ， 比 如 在 document 上 用 
addEventListener 绑 定 ， 在 unbind 里 用 removeEventListener 解 绑 ， 比 较 典 型 的 示例 就 是 让 这 个 元 
素 随 着 鼠标 拖 搜 。 在 后 面 的 8.2 节 中 ， 我 们 会 详细 介绍 。 

如 果 需 要 多 个 值 ， 自 定义 指令 也 可 以 传 入 一 个 JavaScript 对 象 字面 量 ， 只 要 是 合法 类 型 的 
JavaScript 表达 式 都 是 可 以 的 。 示 例 代 码 如 下 : 


«div id-"app"» 
«div v-test-"í(msg: 'hello', name: 'Aresn'j"»«/div» 
«/div» 
«script» 
Vue.directive('test', { 
bind: function (el, binding, vnode) { 
console.log(binding.value.msg); 
console.log(binding.value.name); 
} 
)); 


var app = new Vue(í 
el: '4app' 
)) 


«/script» 


Vue 2x 移 除了 大 量 Vue Lx 自 定义 指令 的 配置 。 在 使 用 自 定义 指令 时 ， 应 该 充分 理解 业务 需 
求 ， 因 为 很 多 时 候 你 需要 的 可 能 并 不 是 自 定义 指令 ,而 是 组 件 。 在 下 一 节 中 ， 我们 结合 两 个 经 典 的 
示例 来 进一步 了 解 自 定义 指令 的 使 用 场景 和 用 法 。 


8.2 实 战 


8.2.1 开发 一 个 可 从 外 部 关闭 的 下 拉 菜 单 
网 页 中 有 很 多 常见 的 下 拉 菜 单 ， 比 如 图 8-2 所 示 的 用 户 信 息 菜单 。 
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8-2 点击 用 户 的 下 拉 菜 单 


所 击 用 户头 像 和 名 称 ， 会 弹出 一 个 下 拉 琳 单 ， 然 后 点 击 页 和 面 中 其 他 空白 区 域 ( 除 了 菜单 本 入 
外 ) ， 沫 单 就 关闭 了 。 本 示例 就 用 上 自 定 义 指令 来 实现 这 样 的 需求 。 

先 来 分 析 一 下 如 何 实现 。 

该 示例 有 两 个 特点 ， 一 是 点 击 下 拉 菜 单 本 身 是 不 会 关闭 的 ， 二 是 点 击 下拉 沫 单 以 外 的 所 有 区 
域 都 要 关闭 。 点 击 所 有 区 域 可 以 在 document 上 绑 定 click 事件 来 实现 ， 同 时 只 要 过 滤 出 是 否 点 击 
的 是 目标 元 素 内 部 的 元 素 即 可 。 

示例 最 终 呈 现 的 效果 如 图 8-3 所 示 。 





mirn FURE 


下 拉 框 的 内 容 ， 点 击 
外 面 区域 可 以 关闭 


图 8-3 ”下拉 菜 单 示例 最 终 效 果 
首先 初始 化 各 个 文件 。 
index.html : 


<!DOCTYPE html» 

«html» 

«head» 
«meta charset-"utf-8"» 
<title> 可 从 外 部 关闭 的 下 拉 菜 单 </title> 


<link rel="stylesheet" type="text/css" href="style.css"> 
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«/head» 
«body» 


«div id-"app" v-cloak-» 


«/div» 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"clickoutside.js"»«/script» 
«script src-"index.js"»«/script» 
«/body» 
«/html» 


index.js : 


var app = new Vue(í 
el: '4app' 
}); 


clickoutside.js : 


Vue.directive('clickoutside', { 


)); 
利用 组 件 的 基本 知识 很 容易 完成 index. html 和 index.js 32 $8 : 


«div id-"app" v-cloak» 
«div class-"main" v-clickoutside-"handleClose"» 
<button Gclick-"show = !show"> 点 击 显 示 下 拉 菜 单 </button> 
«div class-"dropdown" v-show="show"> 
<p> 下 拉 框 的 内 容 ， 点 击 外 面 区 域 可 以 关闭 </p> 
</div> 
</div> 


</div> 


var app = new Vue({ 
el: '#app', 
data: { 
show: false 
), 
methods: { 
handleClose: function () { 


this.show - false; 
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逻辑 很 简单 ， 点 击 按钮 时 显示 class 为 dropdown 的 div 元 素 。 
自 定义 指令 v-clickoutside 绑 定 了 一 个 函数 handleClose， 用 来 关闭 菜单 。 先 来 看 一 下 
clickoutside.js 的 内 容 : 


Vue.directive('clickoutside', { 
bind: function (el, binding, vnode) { 
function documentHandler (e) { 
if (el.contains(e.target)) { 
return false; 
} 
if (binding.expression) { 


binding.value (e); 


] 
el.  vueClickOutside = documentHandler; 


document.addEventListener('click', documentHandler); 

b, 

unbind: function (el, binding) { 
document.removeEventListener('click', el.  vueClickOutside ); 


delete el.  vueClickOutside ; 


)); 


之 前 分 析 过 , 要 在 document. 上 绑 定 click 事件 ,所 以 在 bind 钩子 内 声明 了 一 个 函数 documentHandler, 
并 将 它 作 为 句柄 绑 定 在 document 的 click 事件 上 。documentHandler 函数 做 了 两 个 判断 ， 第 一 个 是 
判断 点 击 的 区 域 是 否 是 指令 所 在 的 元 素 内 部 ， 如 果 是 ， 就 跳出 函数 ， 不 往 下 继续 执行 。 


(^ contains 方法 是 用 来 判断 元 素 A 是 否 包 含 了 元 素 B， 和 包含 返回 tue， 不 包含 返回 false, 


d 示例 代码 如 下 : 

7 
«!DOCTYPE html» 
«html» 
«head» 


«title»contains«/title» 


«/head» 
«body» 
«div id-"parent"-» 
父 元 素 
«div id="children"> 子 元 素 </div> 
</div> 


<script type="text/javascript"> 
var A = document.getElementById('parent'); 
var B = document.getElementById('children!'); 
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console.log(A.contains(B)); // true 
console.log(B.contains(A)); // false 
«/script» 
«/body» 
«/html» 


第 二 个 判断 的 是 当前 的 指令 v-clickoutside 有 没有 写 表达 式 ， 在 该 自 定义 指令 中 ， 表 达 式 应 该 
是 一 个 函数 ， 在 过 滤 了 内 部 元 素 后 ， 点 击 外 面 任何 区 域 应 该 执行 用 户 表达 式 中 的 函数 ， 所 以 
binding.valueO 就 是 用 来 执行 当前 上 下 文 methods 中 指定 的 函数 的 。 

与 Vue 1x 不 同 的 是 ， 在 自 定义 指令 中 ， 不 能 再 用 this.xxx 的 形式 在 上 下 文中 声明 一 个 变量 ， 
所 以 用 了 el. vueClickOutside 引用 了 documentHandler， 这 样 就 可 以 在 unbind 钓 子 里 移 除 对 
document 的 click 事件 监听 。 如 果 不 移 除 ， 当 组 件 或 元 素 销毁 时 ， 它 仍然 存在 于 内 存 中 。 

以 上 代码 分 解 与 完整 代码 基本 一 致 ， 不 再 重复 提供 。 下 面 是 stylecss 的 代码 : 


[v-cloak] { 
display: none; 

} 

.maint 
width: 125px; 

} 

button(í 
display: block; 
width: 100%; 
color: f£$fff; 
background-color: #39f; 
border: 0; 
padding: 6px; 
text-align: center; 
font-size: 12px; 
border-radius: 4px; 
cursor: pointer; 
outline: none; 
position: relative; 

} 

button:active( 
top: lpx; 
left: 1px; 

} 

. dropdown { 
width: 100%; 
height: 150px; 


margin: 5px 0; 
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font-size: 12px; 
background-color: #fff; 
border-radius: 4px; 
box-shadow: 0 lpx 6px rgba(0,0,0,.2); 
} 
.dropdown pt 
display: inline-block; 
padding: 6px; 
} 


练习 1: 在 update 钩子 中 支持 表达 式 的 更 新 。 

4&2] 2: 扩展 clickoutsidejs， 实 现在 点 击 按钮 显示 下 拉 菜 单 后 ， 通 过 按 下 键盘 的 ESC 键 也 可 
UB] T BER. 

练习 3: 将 练习 2 的 ESC 按键 天 闭 功 能 作为 可 选项 。 提 示 , 可 以 用 修饰 符 , 比 如 v-clickoutside.esc。 


8.22 ”开发 一 个 实时 时 间 转 换 指 令 v-time 


在 一 些 社区 ， 比 如 微 博 、 朋 友 圈 等 ， 发 布 的 动态 会 有 一 个 相对 本 机 时 间 转 换 后 的 相对 时 间 ， 
如 图 8-4 中 波浪 线圈 出 的 时 间 。 


Aresn TalkingData 前 端 开发 工程 师 $ 

[Vuejs2.x] 可 从 外 部 关闭 的 下 拉 菜 单 的 自 定义 指令 

网 页 中 有 很 多 常见 的 下 拉 弹 窗 ， EE FERE AS FOE n ERE re Le 会 弹出 一 个 下 拉 菜 单 ， 然 后 点 击 页 面 中 其 它 空白 区 
B (除了 弹 窗 本 身 外 ) ， 弹 窗 就 关闭 了 。 本 示例 就 用 自 定 义 指 令 来 实现 这 样 的 需求 。 先 来 分 析 一 下 如 何 实现 。 该 示例 有 两 个 特点 ， 一 是 点 
击 下 拉 菜 单 本 身 是 不 会 关闭 的 ， 二 是 点 击 下 拉 菜 单 以 外 的 所 有 区 域 都 要 关闭 。 点 击 所 有 区 域 ， 可 以 在 document RE click 事件 来 实 
现 ， 同 时 只 要 过 滤 出 是 否 点 . 查看 全 部 


RRA 

WebSocket 浅 析 

前 言 在 WebSocket A 了 i 尖 兴 笑 众 多 浏览 器 实现 和 发 布 的 时 期 开发 者 在 开发 需要 接收 来 自 服 务 器 的 实时 通知 应 用 程序 时 ， 不 得 不 求助 于 
些 “hacks” 来 模拟 实时 连接 以 实现 实时 通信 ， 最 流行 的 一 种 方式 是 长 轮 询 。 长 轮 询 主要 是 发 出 一 个 HTTP 请 求 到 服务 器 ， 然 后 保持 连 


接 打 开 以 允许 服务 器 在 稍 后 的 时 间 响 应 (由 服务 器 确定 ) 。 为 了 这 个 连接 有 效 地 工作 ， 许 多 技术 需要 被 用 于 确保 消息 不 错过 ， 如 需要 在 服 


mm A AN EA 
S aR ON ORAT. 查看 全 部 





Ying 前 端 开 发 工程 师 和 

JavaScript 时 间 与 日 期 处 理 实战 :你 肯定 被 坑 过 

本 部 分 的 知识 图 谱 请 参考 编程 语言 知识 图 谱 - 时 间 与 日 期 Et favaScript 时间 与 日 期 处 理 实战 :你 肯定 被 坑 过 从 属于 笔者 的 Web 前 端 入 
门 与 最 佳 实践 中 JavaScript 入 门 与 最 佳 实践 系列 文章 。JavaScript DateTime 标 准时 间 GMT 即 【格林 威 治标 准时 间 (Greenwich 
Mean Time， 简 称 G.M.T.)， 指 位 于 英国 伦敦 郊区 的 皇家 格林 威 治 天 文 台 的 标准 时 间 ， 因 为 本 初子 午 线 被 ... 查看 全 部 





8-4 程序 员 社 区 talkingcoder.com 最 新 文章 列表 


一 般 在 服务 端的 存储 时 间 格 式 是 Unix AFER, bein 2017-01-01 00:00:00 的 时 间 惟 是 
1483200000。 前 端 在 拿 到 数据 后 ,将 它 转 换 为 可 读 的 时 间 格 式 再 显示 出 来 。 为 了 显示 出 实时 性 , 在 
一 些 社交 类 产品 中 ， 甚 至 会 实时 转换 为 几 秒 钟 前 、 几 分 钟 前 、 几 小 时 前 等 不 同 的 格式 ， 这 样 比 直接 
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转换 为 年 、 月 、 日 、 时 、 分 、 秒 更 友好 。 本 示例 就 来 实现 这 样 一 个 自 定义 指令 vtime， 将 表达 式 传 
入 的 时 间 惟 实时 转换 为 相对 时 间 。 
便于 演示 效果 ， 我 们 初始 化 时 定义 了 两 个 时 间 。 


index.html: 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
<title> 时 间 转 换 指 令 </title> 
</head> 
<body> 
«div id-"app" v-cloak> 
«div v-time-"timeNow"»«/div» 
«div v-time-"timeBefore"»«/div» 
«/div» 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"time.js"»«/script» 
«script src-"index.js"»«/script» 
«/body» 
«/html» 


index.js : 

var app - new Vue(í 
el: '£fapp', 
data: { 


timeNow: (new Date()).getTime(), 
timeBefore: 1488930695721 


)); 
timeNow 是 目前 的 时 间 ，timeBefore 是 一 个 写 死 的 时 间 : 2017-03-08. 


Q: ATRAEN A 5 RARE ERAR, e IR A38 A LEV PLE RRE RA 1000 后 再 使 用 。 
提 示 
分 析 一 下 时 间 转 换 的 逻辑 : 
1 分 钟 以 前 ， 显 示 “ 刚 刚 ”。 
1 分 钟 ~1 小 时 之 间 ， 显 示 “xx 分 钟 前 ”。 
1 小 时 ~ 1 天 之 间 ， 显 示 “xx 小 时 前 ”。 
1 天 ~1 个 月 (31 天) 之 间 ， 显 示 “xx 天 前 ”。 
大 于 1 个 月 ， 显 示 “xx 年 xx 月 XX 日 ”。 
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为 了 使 判断 逻辑 更 简单 ， 统 一 使 用 时 间 惟 进行 大 小 判断 。 在 写 指令 v-time 之 前 ， 需 要 先 写 一 
系列 与 时 间 相 关 的 函数 ， 我 们 声明 一 个 对 象 Time， 把 它们 都 封装 在 里 面 。 


time .js: 


var Time = { 

// 获取 当前 时 间 戳 

getUnix: function () { 
var date - new Date(); 
return date.getTime(); 

), 

// 获取 今天 0 点 0 分 0 FPÉSTISE [ET REA 

getTodayUnix: function () { 
var date - new Date(); 
date.setHours (0); 
date.setMinutes (0); 
date.setSeconds (0); 
date.setMilliseconds (0); 
return date.getTime(); 

), 

// Sk SEAT HH 004r 0 TPRSIT [8] EX 

getYearUnix: function () { 
var date - new Date(); 
date.setMonth (0) ; 
date.setDate(1); 
date.setHours (0); 
date.setMinutes (0); 
date.setSeconds (0) ; 
date.setMilliseconds (0); 
return date.getTime(); 

), 

// 获取 标准 年 月 日 

getLastDate: function(time) { 
var date = new Date(time); 
var month = date.getMonth() + 1 < 10 ? 'O' + (date.getMonth() + 1) : 

date.getMonth() + 1; 

var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); 


return date.getFullYear() + '-' + month + "-" + day; 
}, 
// 转换 时 间 
getFormatTime: function (timestamp) { 

var now = this.getUnix(); // 当 前 时 间 戳 

var today = this.getTodayUnix(); // 今 天 0 ga lh] [8] 


var year = this.getYearUnix(); // 今 年 0 点 时 间 戳 
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var timer = (now - timestamp) / 1000;  // 转 换 为 秒 级 时 间 戳 


var tip = ''; 


if (timer <= 0) { 


tip = 刚刚 ' ; 
) else if (Math.floor(timer/60) <= 0) { 
tip = "刚刚 "; 


—— 


else if (timer < 3600) { 
tip = Math.floor(timer/60) + ' 分 钟 前 '; 

} else if (timer >= 3600 && (timestamp - today >= 0) ) { 
tip = Math.floor(timer/3600) + '/NhBj'; 

) else if (timer/86400 <= 31) { 
tip = Math.ceil(timer/86400) + ' 天 前 '; 

} eise { 
tip = this.getLastDate (timestamp); 

} 


return tip; 
}; 


(^ Je KA JavaScript 的 Date 类 型 不 了 解 ， 可 以 到 MDN 查阅 学 习 Date 常用 的 API: 
提 示 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global Objects/Date 


Time.getFormatTime0 方 法 就 是 自 定义 指令 v-time 所 需要 的 ， 入 参 为 毫秒 级 时 间 惟 ， 返 回 已 经 
整理 好 时 间 格 式 的 字符 串 。 
最 后 在 time.js 里 补 全 剩余 的 代码 : 


Vue.directive('time', I 
bind: function (el, binding) { 
el.innerHTML - Time.getFormatTime (binding.value); 
el. timeout = setInterval(function() { 


el.innerHTML - Time.getFormatTime (binding.value); 
), 60000); 


); 
unbind: function (el) { 
clearInterval(el. timeout ); 


delete el. timeout ; 


)); 


在 bind £j TH, 34454 v-time 表达 式 的 值 binding.value 作为 参数 传 入 Time.getFormatTime() 
方法 得 到 格式 化 时 间 ， 再 通过 el.innerHTML 写 入 指令 所 在 元 素 。 定 时 器 el timeout — 每 分 钟 触发 
一 次 ， 更 新 时 间 ， 并 且 在 unbind HF ERR. 
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总 结 : 在 编写 自 定 义 指 令 时 ， 给 DOM 绑 定 一 次 性 事件 等 初始 动作 ， 建 议 在 bind 钩子 内 完成 ， 
同时 要 在 unbind 内 解除 相关 绑 定 。 在 自 定 义 指令 里 , 理论 上 可 以 任意 操作 DOM, 但 这 又 违背 Vue.js 
的 初衷 ， 所 以 对 于 大 幅度 的 DOM 变动 ， 应 该 使 用 组 件 。 

练习 1: 开发 一 个 目 定 义 指令 v-birthday， 接 收 一 个 出 生日 期 的 时 间 惟 ， 将 它 转 换 为 已 经 出 生 
[| XXX X. 

练习 2: 扩展 练习 1 的 自 定 义 指 令 v-birthday， 将 出 生 了 xxx 天 转换 为 具体 年 龄 ， 比 如 25 7 
8 个 月 10 X. 


B 2 md 进 队 篇 


基础 篇 的 章节 内 容 基 本 涵盖 了 Vue.js 2.x 最 常用 的 功能 。 如 果 不 需要 前 端 路 由 和 自动 化 工程 ， 
那么 你 已 经 可 以 利用 这 些 内 容 做 一 些 中 小 型 项 目 了 。 

从 下 一 章 开始 ， 介 绍 的 内 容 会 由 浅 入 深 ， 逐 步 癌 前 端 工 程 化 迈进 ， 使 用 到 的 知识 点 也 逐渐 增 
加 ， 比 如 NPM、Nodejs、ES2015。 当 然 ， 你 完全 不 用 担心 ， 所 有 知识 点 都 会 详细 讲解 到 。 

如 果 你 是 编程 新 手 、 前 端 入 门 者 ， 或 者 刚 从 后 端 转 到 前 端 ， 那 建议 你 在 阅读 后 面 章节 前 先 巩 
固 一 下 基础 篇 所 讲 的 知识 点 , 尤其 是 组 件 的 章节 , 最 好 是 先 练习 一 些 典 型 的 题目 , 加 深 对 Vue.js 基 
础 知识 的 理解 。 以 下 是 推荐 的 一 个 小 项 目 。 

项 目 : 调查 问卷 WebApp。 

描述 : 制作 一 个 简单 的 调查 问卷 HTML 5 小 应 用 ， 每 页 有 一 道 题目 ， 题 目 可 以 是 单 选 题 、 多 
选 题 、 填 写 题 等 。 最 终 效果 如 下 图 所 示 。 


2. 请 选择 您 的 兴趣 爱好 
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说 明 : 每 一 页 可 以 通过 v-show 或 v- 计 在 切换 步骤 时 显示 ， 点 击 重 置 ， 当 前 页 的 控件 还 原 到 初 
始 状 态 。 要 对 每 页 的 数据 进行 校 验 ， 比 如 单 选 题 必 须要 选择 ， 多 选 题 最 少 选择 2 项 ， 最 多 选择 3 
项 ， 文 本 框 输入 不 能 少 于 100 字 ， 辱 当前 页 不 满足 验证 要 求 ， 则 下 一 步 的 按钮 置 灰 ， 不 可 点 击 。 

要 求 : 按钮 要 制作 成 组 件 , 可 以 控制 颜色 、 状态 (禁用), 点 击 后 传递 一 个 自 定义 事件 on-click。 


如 果 你 可 以 轻松 完成 这 个 小 练习 ， 或 者 已 经 迫不及待 地 想 阅 读 下 一 章节 ， 那 就 做 好 准备 ， 来 
探索 新 的 内 容 吧 ! 


Render AA 


Vue.js 2.x 5E Vuejs 1.x 最 大 的 区 别 就 在 于 2.x 使 用 了 Virtual Dom (虚拟 DOMO 来 更 新 DOM 
节点 ， 提 升 泻 染 性 能 。 

虽然 前 面 章 节 我 们 的 组 件 模板 都 是 写 在 template 选项 里 的 ， 但 是 在 Vuejs 编译 时 ， 都 会 解析 
为 Virtual Dom. 

本 章 我 们 就 来 探索 Vue.js 用 于 实现 Virtual Dom 的 Render 函数 用 法 ， 在 介绍 Render 函数 前 ， 
我 们 先 来 看 看 什么 是 Virtual Dom。 


9.1 什么 是 Virtual Dom 


React 和 Vue 2 都 使 用 了 Virtual Dom 技术 ，Virtual Dom 并 不 是 真正 意义 上 的 DOM， 而 是 一 
个 轻 量 级 的 JavaScript 对 象 ， 在 状态 发 生变 化 时 ，Virtual Dom 会 进行 Diff 运算 ， 来 更 新 只 需要 被 
蔡 换 的 DOM， 而 不 是 全 部 重 绘 。 

与 DOM 操作 相 比 ，Virtual Dom 是 基于 JavaScript 计算 的 ， 所 以 开销 会 小 很 多 。 图 9-1 演示 了 
Virtual Dom 运行 的 过 程 。 

正常 的 DOM 节点 在 HTML 中 是 这 样 的 : 

«div id-"main"» 

<p> 文 本 内 容 </p> 
<p> 文 本 内 容 </p> 
</div> 
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状态 更 新 后 ， 进 行 对 
生成 虚拟 节点 比 ， 生 成 补丁 对 象 


Object [|-------> render [------------ >| createElement (h) 


基于 虚拟 节点 创建 dom 节点 









遍历 补丁 对 象 ， 
更 新 dom 节点 


9-1 Virtual Dom 运行 过 程 


用 Virtual Dom 创建 的 JavaScript 对 象 一 般 会 是 这 样 的 : 


var vNode = { 
tag: 'div', 
attributes: { 
id: 'main' 
), 


children: | 


// p 节操 


} 


vNode 对 象 通过 一 些 特定 的 选项 描述 了 真实 的 DOM 结构 。 
在 Vue.js 2 "P, Virtual Dom 就 是 通过 一 种 VNode 类 表达 的 ， 每 个 DOM 元 素 或 组 件 都 对 应 一 
个 VNode 对 象 ， 在 Vue.js 源码 中 是 这 样 定 义 的 : 


export interface VNode { 
tag?: string; 
data?: VNodeData; 
children?: VNode[]; 
text?: string; 
elm?: Node; 
ns?: string; 
context?: Vue; 
key?: string | number; 
componentOptions?: VNodeComponentOptions; 
componentInstance?: Vue; 
parent?: VNode; 
raw?: boolean; 
isStatic?: boolean; 
isRootInsert: boolean; 


isComment: boolean; 
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具体 合 义 如 下 : 


e tag 当前 节点 的 标签 名 。 
e data 当前 节点 的 数据 对 象 。 


VNodeData 代码 如 下 : 


export interface VNodeData { 
key?: string | number; 
slot?: string; 
scopedSlots?: { [key: string]: ScopedSlot }; 
ref?: string; 
tag?: string; 
staticClass?: string; 
class?: any; 
staticStyle?: { [key: string]: any }; 
style?: Object[] | Object; 
props?: { [key: string]: any }; 
attrs?: { [key: string]: any ); 
domProps?: { [key: string]: any }; 
hook?: { [key: string]: Function }; 
on?: ( [key: string]: Function | Function[] ); 
nativeOn?: ( [key: string]: Function | Function[] }; 
transition?: Object; 
show?: boolean; 
inlineTemplate?: { 
render: Function; 
staticRenderFns: Function[]; 
}; 
directives?: VNodeDirective[]; 


keepAlive?: boolean; 


~ 


children 子 节点 ， 数 组 ， 也 是 VNode 类 型 。 

text 当前 节点 的 文本 ， 一 般 文 本 节点 或 注释 节点 会 有 该 属性 。 
elm 当前 虚拟 节点 对 应 的 真实 的 DOM 节点 。 

ns 节点 的 namespace, 

context 编译 作用 域 。. 

functionalContext 函数 化 组 件 的 作用 域 。 

key 节点 的 key 属性 ， 用 于 作为 节点 的 标识 ， 有 利于 patch 的 优化 。 
componentOptions 创建 组 件 实例 时 会 用 到 的 选项 信息 。 

child 当前 节点 对 应 的 组 件 实例 。 

parent 组 件 的 占 位 节点 。 

raw 原始 html. 
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isStatic 静态 节点 的 标识 。 

isRootInsert 是 否 作为 根 节 点 插入 ， 被 <transition> 包 右 的 节点 ， 该 属性 的 值 为 false。 
isComment 当前 节点 是 否 是 注释 节点 。 

isCloned 当前 节点 是 否 为 克隆 节点 。 

isOnce 当前 节点 是 否 有 V-once 指令 。 


VNode 主要 可 以 分 为 如 下 几 类 ， 如 图 9-2 所 示 。 


TextVNode 







EmptyVNode 





ElementVNode 





ComponentVNode CloneVNode 





9-2 VNode 主要 类 型 


TextVNode 文本 节点 。 

ElementVNode 普通 元 素 节 点 。 

ComponentVNode 组件 节点 。 

EmptyVNode 没有 内 容 的 注释 节点 。 

CloneVNode 克隆 节点 ， 可 以 是 以 上 任意 类 型 的 节点 ， 唯 一 的 区 别 在 于 isCloned 属性 为 
true. 


使 用 Virtual Dom 就 可 以 完全 发 挥 JavaScript 的 编程 能 力 。 在 多 数 场 景 中 ， 我 们 使 用 template 


就 足够 了 ， 但 在 一 些 特定 的 场景 下 ， 使 用 Virtual Dom 会 更 简单 ， 下 节 就 来 介绍 Vue 的 Render Á 
数 的 用 法 。 
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先 来 看 这 样 一 个 场景 : 在 很 多 文章 类 型 的 网 站 中 比如 文档 、 博 客 ) 都 有 区 分 一 级 标题 、 二 
级 标题 、 三 级 标题 …… 为 方便 分 享 wl， 它 们 都 做 成 了 锚 点 ， 点 击 一 下 ， 会 将 内 容 加 在 网 址 后 面 ， 
以 “#” 分 割 ， 如 图 9-3 所 示 。 

图 中 的 “特性 ”是 一 个 <h2> 标签 ， 内 容 含 有 一 个 <a hre 伍 "# 特 性 ">#</a> 的 链接 ， 点 击 后 ，url 
就 带 有 了 销 点 信息 ， 别 人 打开 时 ， 会 直接 取 焦 到 “特性 ”所 在 的 位 置 。 
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介绍 MR 
XTiView 
设计 原则 — _ 
Mew 是 一 大 基于 Vuejs 的 开源 UI 组 件 库 ， 主 要 服务 于 PC 界 而 的 中 后 台 产品 。 
5s 特性 a 
— - 高 质量 、 功 能 丰富 





友好 的 API， 自 由 灵活 地 使 用 空间 

X Eqs xis 

细致、 淋 元 的 UI 

使 用 单 文 件 的 Vue 组 件 化 开发 模式 

基于 npm + webpack + babel 开发 ， 支 持 ES2015 


^ . . * * 


e 


使 用 npm 


$ npm install iviewg1.0.1 --save 





9-3 ” 带 有 锚 点 的 标题 


如 果 把 它 封 装 为 一 个 组 件 ， 一 般 写 法 可 能 会 是 这 样 : 


«div id-"app"» 


«anchor :level-"2" title=" 特 性 "> 特性 </anchor> 


«script type-"text/x-template" id-"anchor"» 


«div» 
«hl v-if-"level === 1"> 
«a :href-"'£' + title"» 
«slot»«/slot» 
«/a» 
«/h1» 
«h2 v-if-"level === 2"> 
«a :href-"'4' + title"» 
«slot»«/slot» 
«/a» 
«/h2» 
«h3 v-if-"level === 3"> 
«a :href-"'£4' + title"» 
«slot»«/slot» 
«/a» 
«/h3» 
«h4 v-if-"level === 4"> 
«a :href="'#"' + title"» 
«slot»«/slot» 
«/a» 
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«/h4» 
«h5 v-if-"level === 5"> 
«a :hrefz"'4' + title"» 
«slot»«/slot» 
«/a» 
«/h5» 
«h6 v-if-"level === 6"> 
«a :href-"'4' + title"» 
«slot»«/slot» 
«/a» 
«/h6» 
«/div» 
«/script» 
«/div» 
«script» 


Vue.component('anchor', { 
template: '4anchor', 
props: { 

level: { 
type: Number, 
required: true 
), 
title: { 
type: String, 
default: '' 


)); 


var app - new Vue(í 
el: 'f£fapp' 
)) 


«/script» 


这 样 写 没有 任何 错误 ， 只 是 缺点 很 明显 : 代码 元 长 ， 组 件 的 template 大 部 分 代码 是 重复 的 ， 
只 是 heading 元 素 的 级 别 不 同 ， 再 者 必须 插入 一 个 根 元 素 <div>， 这 是 组 件 的 要 求 。 

template 写法 在 大 多 时 候 是 很 好 用 的 ， 但 到 了 这 里 使 用 起 来 就 很 别扭 。 事实 上 ，prop: level 
己 经 具备 了 heading 级 别 的 含义 ， 我们 更 希望 能 像 拼接 字符 串 的 形式 来 构造 heading 元 素 ， 比 如 "h" 
+ this.level. fE Render 函数 中 的 确 可 以 这 样 做 。 

下 面 是 使 用 Render 函数 改写 后 的 代码 : 

«div id="app"> 

<anchor :level="2" title=" 特 性 "> 特性 </anchor> 
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«/div» 
«script» 
Vue.component('anchor', { 
props: { 
level: { 
type: Number, 
required: true 
- 
title: { 
type: String, 
default: '' 


b, 
render: function (createElement) { 
return createElement ( 


'hD' + this.level, 
[ 
createElement ( 
'a!, 
{ 
domProps: { 


href: '4' + this.title 


); 
this.$slots.default 


)); 


var app - new Vue(í 
el: '#app' 
)) 


«/script» 


Render 函数 通过 createElement 参数 来 创建 Virtual Dom， 结 构 精 简 了 很 多 。 在 第 7 章 组 件 中 介 
绍 slot 时 ， 有 提 到 过 访问 slot 的 用 法 ， 使 用 场景 就 是 在 Render 函数 。 

Render 函数 所 有 神奇 的 地 方 都 在 这 个 createElement 里 ， 下 一 节 我 们 就 来 介绍 它 的 详细 配置 和 
用 法 。 
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9.3 createElement 用 法 


9.3.1 基本 参数 


createElement 构成 了 Vue Virtual Dom 的 模板 ， 它 有 3 个 参数 : 


createElement ( 
// {String | Object | Function} 
// 一 个 HTML 标签 ， 组 件 选项 ， 或 一 个 函数 
// 必 须 Return 上 述 其 中 一 个 
div"; 
// (Object) 
// 一 个 对 应 属性 的 数据 对 象 ， 可 选 
// 您 可 以 在 template 中 使 用 
{ 
// 稍 后 详细 介绍 
), 
// (String | Array) 
// THA (Nodes), n[x& 
[ 
createElement('hl', 'hello world'), 
createElement (MyComponent, { 
props: { 


someProp: 'foo' 


) 


第 一 个 参数 必 选 ， 可 以 是 一 个 HIML 标签 ， 也 可 以 是 一 个 组 件 或 函数 ， 第 二 个 是 可 选 参数 ， 
数据 对 象 ， 在 template 中 使 用 。 第 三 个 是 子 节 点 ， 也 是 可 选 参数 ， 用 法 一 致 。 
对 于 第 二 个 参数 “数据 对 象 ”， 有 具体 的 选项 如 下 : 


{ 
/ /fll v-bind:class 一 样 的 API 
'class': { 
foo: true, 
bar: false 
), 
/ /fll v-bind:style 一 样 的 API 
style: { 


color: 'red', 
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fontSize: 'l4px' 
b, 
// 正常 的 HTML 特性 
attrs: { 
id: “£00" 
}, 
// 组 件 props 
props: { 
myProp: 'bar' 
), 
// DOM 属性 
domProps: { 
innerHTML: 'baz' 
b, 
// 自 定义 事件 监听 器 "on" 
/ /不 支持 如 Vv-on:keyup.enter 的 修饰 器 
// 需要 手动 匹配 keyCode 
on: ( 
click: this.clickHandler 
), 
// 仅 对 于 组 件 ， 用 于 监听 原生 事件 
// 而 不 是 组 件 使 用 vm. $emit 触发 的 自 定义 事件 
nativeOn: { 
click: this.nativeClickHandler 
}, 
// 自 定义 指令 
directives: | 
{ 
name: 'my-custom-directive', 
value: 121 
expression: '1 + 1', 
arg: 'foo', 
modifiers: { 


bar: true 


] ， 
// 作用 域 slot 


// ( name: props => VNode | Array«VNode» } 


scopedSlots: { 


default: props => h('span', props.text) 


} ， 
// 如 果子 组 件 有 定义 slot 的 名 称 
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slot: 'name-of-slot' 
// 其 他 特殊 顶层 属性 
key: 'myKey', 
ref: 'myRef' 

} 


以 往 在 template 里 ， 我 们 都 是 在 组 件 的 标签 上 使 用 形容 v-bind:class, v-bind:style, v-on:click 
这 样 的 指令 ， 在 Render 函数 都 将 其 写 在 了 数据 对 象 里 ， 比 如 下 面 的 组 件 ， 使 用 传统 的 template 与 


法 是 : 


<div id="app"> 
<ele></ele> 
</div> 
<script> 
Vue.component('ele', { 
template: '\ 
«div id-"element" WV 
:class-"(show: show)" \ 
@click="handleClick"> 文 本 内 容 </div>'， 
data: function () { 
return { 


show: true 


}, 
methods: { 
handleClick: function () { 


console.log('clicked!'); 


)); 


var app - new Vue(í 
el: '#app' 
)) 


«/script» 


使 用 Render 改写 后 的 代码 如 下 : 


«div id-"app"» 
«ele»«/ele» 

«/div» 

«script» 
Vue.component('ele', { 


render: function (createElement) { 
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return createElement( 
"diyt; 
{ 
// 动态 绑 定 class， 同 :class 
class: { 
'show': this.show 
}, 
// 普通 html 特性 
attrs: ( 
id: 'element' 
} ， 
// 给 aiv 绑 定 click 事件 
on: { 


click: this.handleClick 


); 
' 文 本 内 容 ' 


}, 
data: function () { 
return { 


show: true 


}, 
methods: { 


handleClick: function () { 


console.log('clicked!'); 


)); 


var app = new Vue(í 
el: '#app' 
)) 


«/script» 


就 此 例 而 言 ，template 的 写法 明显 比 Render 写法 要 可 读 而 且 简 洁 ， 所 以 要 在 合适 的 场景 使 用 
Render 函数 ， 否 则 只 会 增加 负担 。 


9.3.2 约束 


所 有 的 组 件 树 中 ， 如 果 VNode 是 组 件 或 含有 组 件 的 slot， 那 么 VNode 必须 唯一 。 所 以 下 面 的 
两 个 示例 都 是 错误 的 。 
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示例 一 ， 重 复 使 用 组 件 ， 代 码 如 下 : 


«div id="app"> 
<ele></ele> 
</div> 
«script» 
// 局 部 声明 组 件 
var Child = { 
render: function(createElement) { 


return createElement('p', 'text'); 


); 
Vue.component('ele', { 
render: function (createElement) { 
// 创建 一 个 子 节点 ， 使 用 组 件 Cnilad 
var ChildNode = createElement (Child); 
return createElement('div', | 
ChildNode, 
ChildNode 


var app = new Vue(í 
el: '4app' 
)) 


«/script» 


zB, Sm EGMSATFT] slot， 代 人 码 如 下 : 


«div id="app"> 
<ele> 
«div» 
«Child»«/Child» 
«/div» 
«/ele» 
«/div» 
«script» 
// 全 局 注册 组 件 
Vue -component ('Child', { 
render: function (createElement) { 


return createElement('p', 'text'); 


)); 
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Vue.component('ele', { 
render: function (createElement) { 
return createElement('div', [ 
this.$slots.default, 
this.$slots.default 


var app = new Vue(í 
el: '#app' 
}) 


</script> 


这 两 个 示例 都 期 望 在 子 节点 内 演 染 出 两 个 Child 组 件 ， 也 就 是 两 个 <p>text</p> 节点 ， 实 际 预 
虎 时 只 演 染 出 了 一 个 ， 因 为 在 这 种 情况 下 ，VNode 受到 了 约束 。 
对 于 重复 演 染 多 个 组 件 〈 或 元 素 ) 的 方法 有 很 多 ， 比 如 下 面 的 示例 : 


«div id-"app"» 
«ele»«/ele» 
«/div» 
«script» 
// 局 部 声明 组 件 
var Child = { 
render: function(createElement) { 


return createElement('p', 'text'); 


}; 
Vue.component('ele', { 
render: function (createElement) { 
return createElement('div', 
Array.apply(null, í( 
length: 5 
)).map(function() { 
return createElement (Child); 
)) 
); 


)); 


var app = new Vue(í 
el: '#app' 
)) 


«/script» 
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上 例 通 过 一 个 循环 和 工厂 图 数 就 可 以 演 染 5 个 重复 的 子 组 件 Child。 对 于 含有 组 件 的 slot， 复 
用 就 要 稍微 复杂 一 点 了 ， 需 要 将 slot 的 每 个 子 节点 都 克隆 一 份 。 示 例 代码 如 下 : 


«div id="app"> 
«ele» 
«div» 
«Child»«/Child» 
«/div» 
«/ele» 
«/div» 
«script» 
// 全 局 注册 组 件 
Vue.component('Child', { 
render: function (createElement) { 


return createElement('p', 'text'); 


)); 
Vue.component('ele', { 
render: function (createElement) { 
// 克隆 slot 节点 的 方法 
function cloneVNode (vnode) { 

// 递归 遍历 所 有 子 节点 ， 并 克隆 

const clonedChildren = vnode.children && 

vnode.children.map(function(vnode) { 
return cloneVNode (vnode); 

)); 

const cloned = createElement ( 
vnode.tag, 
vnode.data, 
clonedChildren 

); 

cloned.text = vnode.text; 

cloned.isComment - vnode.isComment; 

cloned.componentOptions - vnode.componentOptions; 

cloned.elm = vnode.elm; 

cloned.context - vnode.context; 

cloned.ns - vnode.ns; 

cloned.isStatic - vnode.isStatic; 


cloned.key - vnode.key; 


return cloned; 
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const vNodes = this.$slots.default; 
const clonedVNodes = vNodes.map(function(vnode) { 
return cloneVNode (vnode); 


)); 


return createElement('div', | 
vNodes, 
clonedVNodes 

1); 


aF 


var app = new Vue({ 
el: '#app' 
}) 


</script> 


在 Render 函数 里 创建 了 一 个 cloneVNode 的 工厂 函数 ,通过 递归 将 slot MATI ka db sepe JF — 
份 ， 并 对 VNode 的 关键 属性 也 进行 复制 。 

深度 克隆 slot 的 做 法 有 点 偏 黑 科 技 ， 不 过 在 一 般 业 务 中 几乎 不 会 遇 到 这 样 的 需求 ， 主 要 还 是 
运用 在 独立 组 件 中 。 


9.3.3 使 用 JavaScript 代替 模板 功能 


在 Render 函数 中 ， 不 再 需要 Vue 内 置 的 指令 ， 比 如 Vv- 过 、v-for， 当 然 ， 也 没 办 法 使 用 它们 。 
无 论 要 实现 什么 功能 ， 都 可 以 用 原生 JavaScript. E54 v-if AI v-else 可 以 这 样 写 : 


«div id-"app"» 
«ele :show-"show"»«/ele» 
<button Gclick-"show = !show"> 切 换 show«/button» 
«/div» 
«script» 
Vue.component('ele', { 
render: function (createElement) { 
if (this.show) { 
return createElement('p', 'show 的 值 为 true' 22 
) eise ( 
return createElement('p', 'show 的 值 为 false' bs 


), 
props: { 
show: { 
type: Boolean, 
default: false 
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var app = new Vue({ 
el: 'f£fapp', 
data: { 


show: false 


}) 


</script> 


上 例 直 接 使 用 了 JavaScript 的 下 和 else 语句 来 完成 逻辑 判断 。 对 于 v-for， 可 以 用 一 个 简单 的 
for 循环 来 实现 : 
«div id-"app"» 


«ele :list-"list"»«/ele» 
«/div» 


«script» 


Vue.component('ele', { 


render: function (createElement) { 
var nodes - []; 
for (var i = 0; 


i < this.list.length; i++) { 


nodes.push(createElement('p', this.list[i])); 


} 


return createElement('div', nodes); 


List: i 


type: Array 


var app = new Vue({ 
el: '#app', 
data: { 
list; f 
' (Vue.js XAR) ', 
' (JavaScript 高 级 程序 设计 》'， 
' (JavaScript 语言 精粹 》" 


}) 


«/script» 
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在 一 开始 接触 Render 写法 时 ， 可 能 会 有 点 不 适应 ， 毕 竟 这 种 用 createElement 创建 DOM 节点 
的 方法 不 够 直观 和 可 读 ， 而 且 受 Vue 内 置 指令 的 影响 ， 有 时 会 绕 不 过 弯 。 不 过 只 要 把 它 当 作 
JavaScript 一 个 普通 的 函数 来 使 用 ， 写 习惯 后 就 没有 那么 难 理解 了 ， 说 到 底 ， 它 只 是 JavaScript 而 
已 。 比 如 下 面 的 示例 展示 了 JavaScript 的 if. else 语句 和 数组 map 方法 充分 配合 使 用 来 泻 染 一 个 列 
Ko mm T: 


«div id-"app"» 
«ele :list-"list"»«/ele» 
<button click="handleClick"> 显 示 列 表 </button> 
«/div» 
«script» 
Vue.component('ele', { 
render: function (createElement) { 
if (this.list.length) { 
return createElement('ul', this.list.map(function (item) { 
return createElement('li', item); 
))); 
) eise { 
return createElement('p', ' 列表 为 空 zi 


bh, 
props: { 
liste: qd 
type: Array, 
default: function () { 


return [l]; 


)); 


var app = new Vue(í 


el: '4app', 
data: { 
Lists T] 


b, 
methods: { 
handleClick: function () { 
this.list - [ 
' 《Vue .js 实战 》'， 
' (JavaScript 高 级 程序 设计 》'， 
' (JavaScript 语言 精粹 》， 
]; 
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)) 


«/script» 


首先 是 判断 prop: list ERAT, WRT, MAR—A “IRRE” Wep»763x WRTA 
空 数 组 ， 那 就 把 每 一 项 作为 <li> 演 染 ， 放 在 <ul> 下 。 


map( 方 法 是 快速 改变 数组 结构 ， 返 回 了 一 个 新 数组 ， 如 果 你 不 熟悉 数组 的 这 种 链 式 操 
作 (map 常 和 filter、sort 等 方法 一 起 使 用 ， 因 为 它们 返回 的 都 是 新 数组 ) ， 可 以 使 用 
提 示 简单 的 for 循环 ， 这 样 更 容易 理解 。 


上 例 的 Render 函数 对 应 的 template. 写法 如 下 : 


«ul v-if-"list.length"-» 
«li v-for-"item in list">{{ item }}</li> 
«/ul» 


«p v-else»JJX7g7«/p» 
Render 函数 里 也 没有 与 v-model 对 应 的 API， 需 要 自己 来 实现 逻辑 。 示 例 代 码 如 下 : 


«div id-"app"» 
«ele»«/ele» 
«/div» 
«script» 
Vue.component('ele', { 
render: function (createElement) { 
var this - this; 
return createElement('div', [ 
createElement('input', { 
domProps: { 
value: this.value 
} ， 
on: { 
input: function (event) { 


 this.value = event.target.value; 


} ) ， 
createElement('p', 'value: ' + this.value) 
] ) 
b, 
data: function () { 


return { 
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value: '' 


var app = new Vue({ 
el: '#app' 
)) 


«/script» 


事实 上 ，v-model 就 是 prop: value 和 event: input 组 合 使 用 的 一 个 语法 糖 ， 虽 然 在 Render 里 
与 起 来 比较 复杂 ， 但 是 可 以 自由 控制 ， 深 入 到 更 底层 。 
上 例 的 Render 函数 对 应 的 template. 写法 如 下 : 
<div> 
<input v-model="value"> 


<p>value: {{ value }}</p> 
</div> 


对 于 事件 修饰 符 和 按键 修饰 符 , 基本 也 需要 自己 实现 , de 9-1 列举 了 大 部 分 修饰 符 对 应 的 实现 
方案 。 


表 9-1 部 分 事件 修饰 符 和 按键 修饰 符 对 应 的 句柄 


修饰 符 对 应 的 句柄 

.Stop event.stopPropagation() 

prevent event.preventDefault() 

.self if (event.target !== event.currentTarget) return 

„enter, .13 if (event.keyCode !— 13) return 替换 13 位 需要 的 keyCode 


.ctrl, .alt, .shift、 .meta | if ('event.ctrIKey) return 根据 需要 替换 ctrlKey 为 altKey, shiftKey 或 metaKey 


对 于 事件 修饰 符 .capture 和 .once，Vue 提供 了 特殊 的 前 级 ， 可 以 直接 写 在 on 的 配置 里 ， 如 表 
9-2 所 示 。 


表 9-2 .capture 和 .once 事件 修饰 符 的 前 组 


修饰 符 前 组 
capture ! 
-once ~ 
.capture.once 或 .once.capture ~l 
写法 如 下 : 
on: | 


'"Iclick': this.doThisInCapturingMode, 
'«keyup': this.doThisOnce, 
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'«!mouseover': this.doThisOnceInCapturingMode 


} 
例如 ， 下 面 的 示例 简单 模拟 了 聊天 发 送 内 容 的 场景 。 示 例 代码 如 下 : 


«div id="app"> 
<ele></ele> 
</div> 
«script» 
Vue.component('ele', { 
render: function (createElement) { 
var this = this; 
// 泻 染 聊天 内 容 列 表 
if (this.list.length) { 
var listNode = createElement('ul', this.list.map(function(item) { 
return createElement('li', item); 
))); 
) eise { 
var listNode = createElement('p', ' 暂 无 聊天 内 容 ') ; 
} 
return createElement('div', ‘| 
listNode, 
createElement('input', { 
attrs: ( 
placeholder: ' 输 入 内 容 ， 按 回 车 键 发 送 ' 
}, 
style: | 
width: '200px' 
), 
on: { 
keyup: function (event) { 
// 如 果 不 是 回 车 键 ， 不 发 送 数据 
if (event.keyCode !== 13) return; 
// 添 加 输入 的 内 容 到 聊天 列表 
 this.list.push(event.target.value); 
// 发 送 后 ， 清 空 输入 框 
Fa 


event.target.value - ; 


}) 
] ) 
} ， 


data: function () { 


return { 
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var app - new Vue(í 
el: '4app' 
)) 


«/script» 


对 于 slot， 我 们 已 经 介绍 过 可 以 用 this.Sslots 来 访问 ， 在 Render 函数 中 会 大 量 使 用 ， 不 过 没有 
使 用 slot 时 ， 会 显示 一 个 默认 的 内 容 ， 这 部 分 逻辑 需要 我 们 自己 实现 。 示 例 代码 如 下 : 


«div id="app"> 
<ele></ele> 
<ele> 

<p>slot 的 内 容 </p> 

</ele> 

</div> 

«script» 
Vue.component('ele', { 


render: function (createElement) { 


if (this.$slots.default === undefined) { 
return createElement('qiv'!，' 没 有 使 用 slot 时 显示 的 文本 '); 
) eise { 


return createElement('div', this.$slots.default); 


)]); 


var app = new Vue(í 
el: '#app' 
)) 


«/script» 


this.$slots.default 等 于 undefined， 就 说 明 父 组 件 中 没有 定义 slot， 这 时 可 以 自 定 义 显 示 的 内 容 。 
9.4 ARUL 
Vue.js 提供 了 一 个 functional 的 布尔 值 选 项 ， 设 置 为 tue 可 以 使 组 件 无 状态 和 无 实例 ， 也 就 


没有 data 和 this 上 下 文 。 这 样 用 render 函数 返回 虚拟 节点 可 以 更 容易 泻 染 ， 因 为 函数 化 组 件 只 是 
一 个 函数 ， 泻 染 开 销 要 小 很 多 。 
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使 用 函数 化 组 件 时 ，Render 函数 提供 了 第 二 个 参数 context 来 提供 临时 上 下 文 。 组 件 需要 的 
data. props. slots. children, parent 都 是 通过 这 个 上 下 文 来 传递 的 ， 比 如 this.level 要 改写 为 
context.props.level, this.$slots.default 改写 为 context.children. 

例如 ， 下 面 的 示例 用 函数 化 组 件 展示 了 一 个 根据 数据 智能 选择 不 同 组件 的 场景 : 


«div id-"app"» 
«smart-item :data-"data"»«/smart-item» 
«button @click="change('img')"> 切 换 为 图 片 组 件 </button> 
«button Gclick-"change('video') "> 切换 为 视频 组 件 </button> 
«button Qclick="change('text') "> 切换 为 文本 组 件 </button> 
</div> 
«script» 
// 图 片 组 件 选 项 
Var ImgItem = { 
props: ['data'], 
render: function (createElement) { 
return createElement('div', |[ 
createElement ('p'，' 图 片 组 件 ')， 
createElement('img', { 
attrs: { 


src: this.data.url 


] ) ; 


}; 
// 视频 组 件 选 项 
var VideoItem = { 
props: ['data'], 
render: function (createElement) { 
return createElement('div', [ 
createElement('p', ' 视 频 组 件 ' ) ， 
createElement('video', { 
atbtrs: i 
src: this.data.url, 
controls: "'controls', 


autoplay: 'autoplay' 


}; 
// 纯 文 本 组 件 选项 
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var TextItem = { 
props: ['data'!'], 
render: function (createElement) { 
return createElement('div', | 
createElement ('p'，' 纯 文本 组 件 ')， 
createElement('p', this.data.text) 


] ) ; 


}; 
Vue.component('smart-item', { 
/ /函数 化 组 件 
functional: true, 
render: function (createElement, context) { 
// 根据 传 入 的 数据 ， 智 能 判断 显示 哪 种 组 件 
function getComponent () { 
var data - context.props.data; 
// 判断 prop: data 的 type 字段 是 属于 哪 种 类 型 的 组 件 
if (data.type === 'img!') return ImgItem; 
if (data.type === 'video') return VideoItem; 
return TextItem; 
} 
return createElement( 
getComponent(), 
{ 
props: { 
/ /4& smart-item 的 prop: data 传 给 上 面 智 能 选择 的 组 件 


data: context.props.data 


), 


context.children 


), 
props: { 
data: { 
type: Object, 


required: true 


}) 


var app = new Vue(í 
el: 'fapp', 
data: { 
data: (] 
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} ， 
methods: { 
// 切换 不 同类 型 组 件 的 数据 
change: function (type) { 
if (type === 'img') { 
this.data = { 
type: 'img', 
url: 'https://raw.githubusercontent.com/iview/ 
iview/master/assets/logo.png' 
} 
) else if (type === 'video') { 
this.data = { 
type: 'video', 
url: 'http://vjs.zencdn.net/v/oceans.mp4' 
} 
} else if (type === 'text') { 
this.data = { 
type: 'text', 


content: ' 这 是 一 段 纯 文本 ' 


} ， 
created: function () ( 
// 初始 化 时 ， 默 认 设置 图 片 组 件 的 数据 
this.change('img'); 
} 
)) 


«/script» 


代码 片段 比较 长 ， 逐 步 分 析 一 下 实现 的 内 容 。ImgItem、VideoItem、TextItem ix 3 个 对 象 分 别 
是 图 片 组件 、 视频 组 件 和 纯 文 本 组 件 的 选项 , 它们 都 接收 一 个 prop: data. 在 函数 化 组 件 smart-item 
HB, 也 有 props: data， 通 过 getComponent 函数 来 判断 其 字段 type 的 值 ， 选 择 这 条 数据 适合 泻 染 的 
组 件 。 通过 createElement 把 getComponent0 返 回 的 对 象 设置 为 第 一 个 参数 , 然后 通过 第 二 个 参数 把 
smart-item 的 data 传递 到 选择 的 组 件 里 的 prop: data， 组 件 演 染 出 不 同 的 内 容 。 

根 实 例 app 中 的 方法 change 用 来 生成 不 同 的 数据 ， 通 过 3 个 button 来 切换 。 

该 示例 难 理解 的 地 方 在 于 smart-item 和 3 个 功能 组 件 都 有 prop: data， 它 们 的 传递 顺序 和 原理 
看 起 来 比较 含糊 。 

函数 化 组 件 在 业务 中 并 不 是 很 常用 ， 而 且 也 有 其 他 类 似 的 方法 来 实现 ， 比 如 上 例 也 可 以 用 组 
件 的 is 特性 来 动态 挂 载 。 总 结 起 来 ， 函 数 化 组 件 主 要 适用 于 以 下 两 个 场景 : 


e 程序 化 地 在 多 个 组 件 中 选择 一 个 。 
e 在 将 children, props, data 传递 给 子 组件 之 前 操作 它们 。 
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9.5 JSX 


使 用 Render 函数 最 不 友好 的 地 方 就 是 在 模板 比较 简单 时 ， 写 起 来 也 很 复杂 ， 而 且 难 以 阅读 出 
DOM t, DRAT n niet EN. WEH createBlement 就 像 盖 楼 一 样 一 层 层 延伸 下 去 。 举 一 
个 例子 ， 比 如 使 用 template 书写 的 模板 是 : 


«Anchor :level-"]"» 
<span> 一 级 </span> 标题 
«/Anchor» 


使 用 createElement 改写 后 应 该 是 : 


return createElement('Anchor', { 
props: { 
level: 1 
} 
hl 
createElement('span', r=); 
' 标 题 ' 
1); 


为 了 让 Render 函数 更 好 地 书写 和 阅读 ，Vue.js 提供 了 插件 babel-plugin-transform-vue-jsx 来 支 
持 JSX 语法 。 

JSX 是 一 种 看 起 来 像 HIML， 但 实际 是 JavaScript 的 语法 扩展 ， 它 用 更 接近 DOM 结构 的 形式 
来 描述 一 个 组 件 的 UI 和 状态 信息 ， 最 早 在 Reactjs 里 大 量 应 用 。 

比如 上 面 的 Render 用 JSX 改写 后 的 代码 是 : 


new Vue ({ 
el: '#app', 
render (h) { 
return ( 
<Anchor level={1}> 
<span> 一 级 </span> 标题 
«/Anchor» 


}) 


上 面 的 代码 无 法 直接 运行 ， 需 要 在 webpack 里 配置 插件 babel-plugin-transform-vue-jsx 编译 后 
才 可 以 ， 后 面 章节 会 介绍 到 webpack 的 用 法 。 

这 里 的 render 使 用 了 ES2015 的 语法 缩写 了 函数 ， 也 会 在 后 面 的 章节 提 到 。 需 要 注意 的 是 ， 参 
数 h 不 能 省 略 ， 人 否则 使 用 时 会 触发 错误 。 

使 用 createElement 时 ， 常 用 的 配置 示例 如 下 : 
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render(createElement) { 


} 


return createElement('div', { 


}) 


props: { 
text: 'some text' 
} ， 
attrs: i 
id: 'myDiv' 
), 
domProps: { 
innerHTML: 'content' 
), 
on: 1 
change: this.changeHandler 
), 
nativeOn: ( 
click: this.clickHandler 
} ， 
class: ( 
show: true, 
on: false 
} ， 
style: { 
Color: ZEEE', 
background: '4f50' 
), 
key: 'key', 
ref: 'element', 
reflInFor: true, 


slot: 'slot' 


上 面 的 示例 使 用 JSX 后 等 同 于 下 面 的 代码 : 


render (h) { 


return ( 


<div 
id="myDiv" 
domPropsInnerHTML="content" 
onChange={this.changeHandler} 
nativeOnClick={this.clickHandler} 
class-(( show: true, on: false }} 
style-(( color: '4fff', background: 
key-"key" 


'#f50' 


B 
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ref-"element" 
reflinFor 
slot-"slot"» 


«/div» 


) 


JSX 仍然 是 JavaScript 而 不 是 DOM， 如 果 你 的 团队 不 是 JSX 强 驱 动 的 ， 建 议 还 是 以 模板 
template 的 方式 为 主 ， 特 殊 场 景 〈 比 如 锚 点 标题 ) 使 用 Render 的 createElement 辅助 完成 。 


9.6 Zik: 使 用 Render 函数 开发 可 排序 的 表格 组 件 


表格 可 以 用 来 展示 大 量 结构 化 的 数据 。 本 节 将 以 Render 函数 为 基础 ， 开 发 一 个 可 以 对 表格 茶 
一 列 数据 进行 排序 的 表格 组 件 。 最 终 效 果 如 图 9-4 所 示 。 


姓名 ERT 1 HAR T 1 地 址 

王小明 18 1999-02-21 北京 市 朝阳 区 芍药 居 
张 小 刚 25 1992-01-23 北京 市 海淀 区 西 二 旗 

李 小 红 30 1987-11-10 上 海 市 浦东 新 区 世纪 大 道 
周 小 伟 26 1991-10-10 深圳 市 南山 区 深 南大 道 


9-4 可 排序 表格 组 件 效果 图 


一 个 标准 的 表格 由 <table>、<thead>、<tbody>、<tr>、<th>、<td> 等 元 素 组 成 。 

表格 组 件 的 所 有 内 容 ( 表 头 和 行 数据 ) 由 两 个 prop 构成 :columns 和 data。 两 者 都 是 数组 ,columns 
用 来 描述 每 列 的 信息 ， 并 泻 染 在 表 头 <thead> 内 ， 可 以 指定 某 一 列 是 否 需要 排序 ;data 是 每 一 行 的 
数据 ， 由 columns 决定 每 一 行 里 各 列 的 顺序 。 

按照 惯例 ， 先 初始 化 各 个 文件 。 


index.html: 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
<title> 可 排序 的 表格 组 件 </title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
«div id-"app" v-cloak> 


«v-table»-c/v-table» 
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«/div» 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"table.js"»«/script» 
«script src-"index.js"»«/script» 
«/body» 
«/html» 


Index.js : 


var app = new Vuel(t{ 
el: '#app' 
)); 


table js: 


Vue.component('vTable', { 
props: ( 
columns: { 
type: Array, 
default: function () { 


return []; 


), 
data: { 
type: Array, 
default: function () ( 


return []; 


} ) ; 


为 了 让 排序 后 的 columns 和 data 不 影响 原始 数据 ， 给 v-table 组 件 的 data 选项 添加 两 个 对 应 的 
数据 ， 组 件 所 有 的 操作 将 在 这 两 个 数据 上 完成 ， 不 对 原始 数据 做 任何 处 理 : 


Vue.component('vTable', { 
II cse 
data: function () { 
return { 
currentColumns: [], 


currentData: [] 
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columns 的 每 一 项 是 一 个 对 象 , 其 中 title 和 key 字段 是 必 填 的 , 用 来 标识 这 列 的 表 头 标题 , key 
是 对 应 data 中 列 内 容 的 字段 名 。sortable 是 选 填 字 段 , 如 果 值 为 tue, 说 明 该 列 需要 排序 。 在 index.js 
中 构造 数据 ， 比 如 : 


var app = new Vue(í 
el: '#app', 
data: { 
columns: [ 


{ 
title: ! 姓名， 


key: 'name' 


title: ' 年 龄 '， 
key: 'age', 


sortable: true 


name: ' 王 小 明 '， 

age: 18, 

birthday: '1999-02-21', 
address: 'Jbmm 88pH XC A5 25 js " 


} 
} ) 


在 index.html 里 ， 把 数据 传递 给 组 件 v-table: 


«v-table :data-"data" :columns-"columns"»«/v-table» 


v-table 组 件 目前 的 prop: columns 和 data 的 数据 已 经 从 父 级 传递 过 来 了 ， 不 过 前 面 介 绍 过 ， 
v-table 不 直接 使 用 它们 ， 而 是 使 用 data 选项 的 currentColumns 和 currentData。 所 以 在 v-table 初始 
化 时 ， 需 要 把 columns 和 data 赋值 给 currentColumns 和 currentData。 在 v-table 的 methods 选项 里 
定义 两 个 方法 用 来 赋值 ， 并 在 mounted 钩子 内 调用 : 


Vue.component('vTable', { 
methods: ( 
makeColumns: function () { 


this.currentColumns = this.columns.map(function (col, index) { 
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// 添 加 一 个 字段 标识 当前 列 排序 的 状态 ， 后 续 使 用 


col. sortType - 'normal'; 
// 添 加 一 个 字段 标识 当前 列 在 数组 中 的 索引 ， 后 续 使 用 
col. index = index; 


return col; 
)); 
}, 
makeData: function () { 
this.currentData = this.data.map(function (row, index) 1 
// 添 加 一 个 字段 标识 当前 行 在 数组 中 的 索引 ， 后 续 使 用 
row. index = index; 
return row; 


} ) ; 


}, 
mounted () { 


// v-table 初始 化 时 调用 


this.makeColumns(); 


this.makeData(); 


)); 


map) Æ JavaScript 数组 的 一 个 方法 , 根据 传 入 的 函数 重新 构造 一 个 新 数组 。 排 序 分 升序 Casc) 
和 降序 〈desc) 两 种 ， 而 且 同 时 只 能 对 一 列 数据 进行 排序 ， 与 其 他 列 互 斥 ， 为 了 标识 当前 列 的 排序 
状态 ， 在 map 列 添加 数据 时 ， 默 认 给 每 列 都 添加 一 个 _sortType 的 字段 ， 并 且 赋 值 为 normal， 表 示 
默认 排序 〈 也 就 是 不 排序 ) 。 在 排序 后 ，currentData 每 项 的 顺序 可 能 都 会 发 生变 化 ， 所 以 给 
currentColumns 和 currentData 的 每 个 数据 都 添加 index 字段 ， 代 表 当 前 数据 在 原始 数据 中 的 索引 。 

有 了 数据 ， 下 面 就 来 用 Render 函数 构造 虚拟 DOM. 

表格 的 最 外 层 是 <table> 元 素 ， 里 面包 含 了 <thead> 表 头 和 <tbody> 表格 主体 。thead 是 一 行 多 
列 ( 一 个 <t>、 多 个 <th>) tbody 是 多 行 多 列 ( 多 个 <t>、 多 个 <td>) 。 先 由 外 至 内 构建 出 大 致 的 
DOM 结构 : 


Vue.component('vTable', { 
FE xs 
render: function(h) { 
var ths - []; 
var trs = []; 
return h('table',[ 
h('thead', | 
h('tr', ths) 
1), 
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h('tbody', trs) 
] ) 


)); 


这 里 的 h 就 是 createElement， 只 是 换 了 个 名 称 。 表 格 主体 trs 是 一 个 二 维 数组 ， 数 据 由 
currentColumns 和 CurrentData 组 成 : 


render: function(h) { 


var this - this; 
Ff sss 
var trs = []; 


this.currentData.forEach(function(row) { 
var tds - []; 
 this.currentColumns.forEach(function(cell) { 

tds.push(h('td', row[cell.keyl)); 

)); 
trs.push(h('tr', tds)); 

)); 

EK xs 

} 


先 志 历 所 有 的 行 ， 然 后 在 每 一 行内 再 人 历 各 列 ， 最 终 组 合 出 主体 内 容 节 点 trs. 
表 头 的 节点 ths 要 相对 复杂 一 点 ， 因 为 有 排序 的 功能 : 


render: function(h) { 
var this = this; 
var ths - []; 
this.currentColumns.forEach(function(col, index) { 
if (col.sortable) { 
ths.push (h('th', [ 
h('span', col.title), 


// 升序 
h('a', t 
class: ( 
on: col. sortType === 'asc' 
); 
on: 4 


click: function () 4 


| this.handleSortByAsc (index) 
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h('a', 1 
class: ( 
on: col. sortType ——- 'desc' 


}, 
on: { 
click: function () { 


_this.handleSortByDesc (index) 


Ta 
])); 
} else { 


ths.push(h('th', col.title)); 


如 果 col.sortable 没有 定义 ， 或 值 为 false， 就 直接 把 coltitle 泻 染 出 来 ， 否 则 除了 泻 染 title, 
加 了 两 个 <a> 元 素来 实现 升序 和 降序 的 操作 。handleSortByAsc 和 handleSortByDesc 代码 如 下 : 
Vue .Component ('vTable', { 
Ff owes 
methods: { 


handleSortByAsc: function (index) { 
var key = this.currentColumns [index].key; 
this.currentColumns.forEach(function (col) { 
col. sortType - 'normal'; 


)); 


this.currentColumns[index]. sortType - 'asc'; 


this.currentData.sort(function (a, b) 1{ 
return a[key] » b[key] ? 1 : -1; 
)); 
} ， 
handleSortByDesc: function (index) { 
var key = this.currentColumns [index].key; 
this.currentColumns.forEach(function (col) { 
col. sortType - 'normal'; 


)); 


this.currentColumns[index]. sortType - 'desc'; 
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this.currentData.sort(function (a, b) { 


return a[key] «€ b[key] ? 1 : -1; 


两 个 方法 基本 类 似 〈 读 者 可 尝试 将 两 个 方法 合并 为 一 个 ) ， 一 个 是 升序 操作 ， 一 个 是 降序 操 
作 ， 目 的 都 是 改变 currentColumns 数组 每 项 的 顺序 。 排 序 使 用 了 JavaScript 数组 的 sort0 方 法 ， 这 里 
之 所 以 返回 1 和 -1， 而 不 直接 返回 a[key] <b[key]， 也 就 是 true 或 false， 是 因为 在 部 分 浏览 器 ( 比 
如 Safari) 对 sort0 的 处 理 不 同 ， 而 1 和 -1 可 以 做 到 兼容 。 排 序 前 ， 先 将 所 有 列 的 排序 状态 都 重 置 
为 normal， 然 后 设置 当前 列 的 排序 状态 Case 或 desc) ， 对 应 到 render 里 <a> 元 素 的 class 名 称 on, 
后 面 会 通过 CSS 来 高 亮 显 示 当 前 列 的 排序 状态 。 

当 泻 染 完 表格 后 ， 父 级 修改 了 data 数据 ， 比 如 增加 或 删除 , v-table 的 currentData 也 应 该 更 新 ， 
如 果 某 列 已 经 存在 排序 状态 ， 更 新 后 应 该 直接 处 理 一 次 排序 。 其 代码 如 下 : 


Vue.component('vTable', { 
FEE wes 
watch: { 
data: function () ( 
this.makeData(); 
var sortedColumn = this.currentColumns.filter(function (col) { 
return col. sortType !== 'normal'; 


)); 


if (sortedColumn.length > 0) { 
if (sortedColumn[0]. sortType === 'asc') I 
this.handleSortByAsc(sortedColumn[0]. index); 
} else { 
this.handleSortByDesc(sortedColumn[0]. index); 


通过 遍历 curentColumns 来 找 出 是 否 按 某 一 列 进行 过 排序 ， 如 果 有 ， 就 按照 当前 排序 状态 对 
更 新 后 的 数据 做 一 次 排序 操作 。 
以 下 是 完整 的 代码 。 
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index.html: 


<!DOCTYPE html> 
«html» 
«head» 
«meta charset-"utf-8"» 
<title> 可 排序 的 表格 组 件 </title> 
«link rel="stylesheet" type="text/css" href-"style.css"» 
</head> 
<body> 
<div id="app" v-cloak> 
<v-table :data="data" :columns="columns"></v-table> 
<button @click="handleAddData"> 添 加 数据 </button> 
</div> 
<script src="https://unpkg.com/vue/dist/vue.min.js"></script> 
<script src="table.js"></script> 
«script src-"index.js"»«/script» 
«/body» 
«/html» 


index.js : 


var app = new Vue(í 
el: '#app', 
data: { 
columns: [ 
{ 
title: ' 姓 名 '， 


key: 'name' 


title: ' 年 龄 ' " 
key: 'age', 


sortable: true 


title: ' 出 生日 期 '， 
key: 'birthday', 
sortable: true 


té 
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title: ' 地 址 ' " 


key: 'address' 


name: ' 王 小 明 '"， 

age: 18, 

birthday: “1999—02—21"; 
address: ' 北 京 市 朝阳 区 芍药 居 ' 


name: ' 张 小 刚 '， 

age: 25, 

birthday: '1992-01—23', 
address: ' 北 京 市 海淀 区 西 二 旗 ' 


name: ' 李 小 红 '， 

age: 30, 

birthday: "1987-11-10", 
address: ' 上 海 市 浦东 新 区 世纪 大 道 ' 


name: ' 周 小 伟 '， 

age: 26, 

birihdagy:. “1391-10-1107; 
address: ' 深 圳 市 南山 区 深 南 大 道 ' 


b, 
methods: { 
handleAddData: function () { 
this.data.push(( 
name: ' 刘 小 天 '， 
age: 19, 
birthday: '1998-05-30', 
address: ' 北 京 市 东城 区 东直门 ' 
)); 
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table.js : 


Vue.component('vTable', { 
props: { 


columns: { 
type: Array, 


default: function () ( 


return []; 


), 
data: { 
type: Array, 


default: function () { 


return []; 


), 


data: function () { 


return { 


currentColumns: [], 


currentData: [] 


), 


render: function(h) { 


var this - this; 


var ths = []; 


this.currentColumns.forEach(function(col, 


index) 
if (col.sortable) { 
ths.push(h('th', [ 
h('span', col.title), 
h('a', 1 


class: { 


on: col. sortType === 'asc' 
), 


on: { 
click: function O | 

| this.handleSortByAsc (index) 
} 

ble £518 

h('a', { 


class: ( 


on: col. sortType ——- 'desc' 
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on: | 
click: function () 1 


| this.handleSortByDesc (index) 


i5 A 
1)); 
) eise { 
ths.push(h('th', col.title)); 


)); 


var trs = []; 
this.currentData.forEach(function(row) { 
var tds = []; 
 this.currentColumns.forEach(function(cell) { 
tds.push(h('td', row[cell.key])); 
)); 
trs.push(h('tr', tds)); 
)); 
return h('table',[ 
h('thead', | 
h('tr', tha) 
1), 
h('tbody', trs) 
] ) 
methods: { 
makeColumns: function () { 
this.currentColumns = this.columns.map(function (col, index) { 
col. sortType - 'normal'; 
col. index - index; 
return col; 
)); 
), 
makeData: function () { 
this.currentData = this.data.map(function(row, index) { 
row. index - index; 
return row; 
)); 


), 
handleSortByAsc: function (index) { 
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var key = this.currentColumns [index].key; 

this.currentColumns.forEach(function (col) { 
col. sortType = 'normal'; 

)); 


this.currentColumns[index]. sortType - 'asc'; 


this.currentData.sort(function (a, b) I 
return a[key] » b[key] ? 1 : -1; 
)); 
} ， 
handleSortByDesc: function (index) { 
var key = this.currentColumns[index].key; 
this.currentColumns.forEach(function (col) { 
col. sortType = 'normal'; 
)); 


this.currentColumns[index]. sortType - 'desc'; 


this.currentData.sort(function (a, b) { 
return a[key] < b[key] ? 1 : -1; 
}); 


}, 
watch: { 
data: function () ( 
this.makeData(); 
var sortedColumn - this.currentColumns.filter(function (col) 


return col. sortType !== 'normal'; 


)); 


if (sortedColumn.length > 0) { 
if (sortedColumn[0]. sortType === 'asc') { 
this.handleSortByAsc(sortedColumn[0]. index); 
) else { 


this.handleSortByDesc(sortedColumn[0]. index); 


}, 
mounted () { 
this.makeColumns(); 


this.makeData(); 
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style.css: 


[v-cloak]í 
display: none; 

} 

table( 
width: 1005; 
margin-bottom: 24px; 
border-collapse: collapse; 
border-spacing: 0; 
empty-cells: show; 
border: lpx solid $e9e9e9; 

} 

table th( 
background: *4f7f7f7; 
color: 45c6b77; 
font-weight: 60600; 
white-space: nowrap; 

} 

table td, table tht 
padding: 8px 16px; 
border: lpx solid $e9e9e9; 
text-align: left; 

} 

table th at 
display: inline-block; 
margin: 0 4px; 
cursor: pointer; 

} 

table th a.ont 
color: 43399ff; 

} 

table th a:hover( 
color: 4$3399ff; 

} 


练习 1: 查阅 资料 ， 了 解 表格 的 <colgroup> 和 <col> 元 素 用 法 后 ， 给 v-table 的 columns 增加 一 
个 可 以 设置 列 宽 的 width 字段 ， 并 实现 该 功能 。 

练习 2: 将 该 示例 的 render 写法 改写 为 template 写法 ， 加 以 对 比 ， 总 结 出 两 者 的 差异 性 ， 深 刻 
理解 其 使 用 场景 。 
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97 实战， 留言 列表 


本 节 将 继续 使 用 Render 函数 来 完成 一 个 留言 列表 的 小 功能 ， 效 果 如 图 9-5 所 示 。 


请 问 学 习 前 端 开 发 有 什么 好 的 方法 吗 ? 


回复 @ 小 张 : 推荐 阅读 《JavaScript 高 级 程序 设计 》， 多 练 
习 ， 阅 读 别 人 代码 ， 要 善于 思考 问题 。 


回复 @Aresn: 好 的 ， 非 常 感谢 ! 





9-5 留言 列表 效果 图 


与 之 前 的 几 个 实战 案例 不 同 的 是 ， 留 言 列表 更 侦 癌 于 业务 ， 而 之 前 的 实战 〈 数 字 输 入 框 、 标 
签 页 、 表 格 ) 都 是 独立 的 功能 组 件 。 将 留言 列表 用 组 件 树 展示 ， 如 图 9-6 所 示 。 


" " ^ 
- 4 
/ " 
j " 
, 
, 


Az" | V i ES 
v-input v-textarea 
" | E ` 
LE: Y "^u 


9-6 留言 列表 组 件 树 





先 来 初始 化 各 个 文件 。 
index.html: 


<!DOCTYPE html» 
«html» 


«head» 
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«meta charset-"utf-8"» 

<title> 留 言 列表 </title> 

«link rel="stylesheet" type-"text/css" href-"style.css"» 
</head> 
<body> 

«div id-"app" v-cloak style="width: 500px;margin: 0 auto;"> 


<div class="message"> 


</div> 
</div> 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"input.js"»«/script» 
«script src-"list.js"»«/script» 
«script src-"index.js"»«/script» 
«/body» 
«/html» 


index.js: 


var app = new Vue({ 
el: '#app' 
)); 


input.js: 


Vue.component('vInput', { 


)); 


Vue.component('vTextarea', { 


)); 


发 布 一 条 留言 ， 需 要 的 数据 有 昵称 和 留言 内 容 ， 发 布 操作 应 该 在 根 实例 app 内 完成 。 留 言 列 
表 的 数据 也 是 从 app 获取 的 。 所 以 在 index.js 中 添加 这 3 项 数据 : 


var app = new Vue(í 
el: '#app', 
data: { 
username: '', 
message: '', 
list: I] 
}, 
methods: { 
handleSend: function () { 
this.list.push(( 
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name: this.username, 


message: 
}); 


this.message = ''; 


, 


this.message 


)); 


进 阶 篇 


数组 list 存储 了 所 有 的 留言 内 容 , 通过 函数 handleSend 给 list 添加 一 项 留言 数据 , 添加 成 功 后 ， 
把 textarea 文本 框 置 空 。 在 index.html 中 ， 使 用 v-model 将 username 和 message 双 问 绑 定 : 


«v-input v-model-"username"»«/v-input» 


«v-textarea v-model-"message"»«/v-textarea» 


9.3 节 里 已 经 介绍 过 Render 函数 内 的 节点 如 何 使 用 v-model: 动态 绑 定 value, Jf HL Wr input 
事件 ， 把 输入 的 内 容 通 过 $emit(input") 派 发 给 父 组 件 。 所 以 组 件 v-input 的 代码 如 下 : 


Vue.component('vInput', { 
props: 1{ 

value: { 

type: 

default: '' 


[String, Number], 


), 


render: function (h) { 


this; 
return h('div', | 


:了 昵称 : !); 
h('anput',. 1 


var this = 


h('span', 


attrs: { 


type: 'text' 
b, 


domProps: { 


value: this.value 


), 


on: { 


input: function (event) { 


 this.value = 


event.target.value; 


 this.S$emit('input', event.target.value); 
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v-textarea 与 v-input 基本 一 致 ， 可 查看 后 面 的 完整 代码 。 


列表 的 节点 树 如 图 9-7 所 示 。 


T 
I A 
I Oy 


I 
I 
* I *" 
[| 
! 


E "à 
(ame ) (message) (reply > 


图 9-7 列表 树 示 意图 





ye 


列表 数据 list 为 空 时 ， 演 染 一 个 “列表 为 空 ” 的 信息 提示 节点 ; 不 为 空 时 ， 每 个 list-item ME 
含 昵 称 、 留 言 内 容 和 回复 按钮 3 个 子 节点 。list.js 的 render 内 容 如 下 : 


render: function (h) { 
var this - this; 
var list - []; 
this.list.forEach(function (msg, index) { 
var node = h('div', { 
attrs: 1 
class: 'list-item' 
} 
^, I 
h('span', msg.name + ': '), 
bi'div', ] 
attrs: { 
class: 'list-msg' 
} 
lš l 
h('p', msg.message), 
h('a', { 
attrs: { 
class: 'list-reply' 
}, 
on: dq 
click: function () { 


 this.handleReply (index); 
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] ) 
list.push (node); 
}); 
if (this.list.length) { 
return h('div', { 
abtErs: { 


class: 'list' 


} else { 
return h('div', { 
attrs: 1 


class: 'list-nothing' 


} 
} ， ' 留 言 列表 为 空 ' ); 


) 


this.list.forEach 相当 于 template 里 的 v-for 指令 , W ETE E zi o AJA handleReply 直接 回 父 
组 件 派 发 一 个 事件 reply, HI Capp) 接收 后 ， 将 当前 list-item 的 昵称 提取 ， 并 设置 到 v-textarea 
内 。 相 关 代 码 如 下 : 


ff Lots 
handleReply: function (index) { 


this.S$Semit('reply', index); 


// index.html 
«list :list-"list" @reply= "handleReply"»«/list» 


// index.js 

handleReply: function (index) { 
var name = this.list[index].name; 
this.message = ' 回 复 @' + name + ': '; 


} 


还 有 剩余 的 几 个 小 细节 ， 比 如 点 击 回复 按钮 后 ， 文 本 框 立刻 聚焦 ;提交 留 言 前 ， 做 非 空 判断 ， 
读者 可 在 完整 代码 中 继续 探索 。 完 整 代 码 如 下 。 
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index.html: 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
«title» aM /title» 
«link rel="stylesheet" type="text/css" href-"style.css"» 
</head> 
<body> 
<div id="app" v-cloak style="width: 500px;margin: 0 auto;"> 
<div class="message"> 
<v-input v-model="username"></v-input> 
<v-textarea v-model="message" ref="message"></v-textarea> 
<button @click="handleSend"> Ağ </button> 
</div> 
«list :list-"list" @reply="handleReply"></list> 
«/div» 
«script src-"https://unpkg.com/vue/dist/vue.min.js"»«/script» 
«script src-"input.js"»«/script» 
«script src-"list.js"»«/script» 
«script src-"index.js"»«/script» 
«/body» 
«/html» 


index.js: 


var app = new Vue({ 
el: '#app', 
data: { 
username: '', 
message: '', 
list: [] 
), 
methods: { 
handleSend: function () { 


if (this.username === '') { 
window.alert (' 请 输入 昵称 ')，; 
return; 

} 

if (this.message === '') { 


window.alert(' 请 输入 留言 内 容 ' ) ; 


return; 
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this.list.push(( 
name: this.username, 


message: this.message 
)); 


this.message - ''; 


, 


} ， 

handleReply: function (index) { 
var name — this.list[index].name; 
this.message = ' 回 复 @' + name + ': '; 


this.S$refs.message.focus(); 


input.js: 


Vue.component('vInput', { 
props: { 
value: { 
type: [String, Number], 
default: '"' 


), 
render: function (h) { 
var this - this; 
return h('div', | 
h('span', 'BEfRR: '), 
h('input', { 
attrs: 1 
type: 'text' 
), 
domProps: { 
value: this.value 
), 
ons 1 
input: function (event) { 


| this.value = event.target.value; 


 this.$emit('input', event.target.value); 


Vue.component('vTextarea'!, 


props: { 
value: { 
type: String, 
default: ** 


}, 
render: function (h) { 
var this - this; 


return h('div', | 
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{ 


h('span', 'BzMz: '), 


h('textarea', { 


attrs: { 


placeholder: ' 请 输入 留言 内 容 ' 


} ， 


domProps: { 


value: this.value 


), 


ref: 'message', 


on: dq 


input: function (event) { 


 this.value = event.target.value; 


 this.S$emit('input', event.target.value); 


}, 
methods: { 


focus: function () 


this.Srefs.message.focus(); 


list.Js : 


Vue.component('list', { 
props: { 
list: Í 
type: Array, 


default: function () { 


return []; 
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), 
render: function (h) { 
var this - this; 
var list = []; 
this.list.forEach(function (msg, index) { 
var node = h('div', { 
attrs: { 
class: 'list-item' 
} 
Is P 
h('span', msg.name + ': '), 
hi(*'div', | 
attrs: ( 
class: 'list-msg' 
} 
^, [ 
h('p', msg.message), 
h('a', ( 
attrs: { 
class: 'list-reply' 
), 
on: {í 
click: function ty 1 


| this.handleReply (index); 


), "回复 ' ) 
] ) 
]) 
list.push (node); 
)); 
if (this.list.length) { 
return h('div', | 
attrs: { 
class: “二 SS 
), 
), list); 
) else { 
return h('div', { 
attrs: { 


class: 'list-nothing' 
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) 
}，' 留言 列表 为 空 ') ; 


}, 
methods: { 
handleReply: function (index) { 


this.$emit('reply', index); 


style.css: 


[v-cloak]í 


display: none; 


"1 
padding: 0; 
margin: 0; 

} 

.message{ 
width: 450px; 
text-align: right; 

} 

.message div{ 
margin-bottom: 12px; 

} 

.message span{ 
display: inline-block; 
width: 100px; 
vertical-align: top; 

} 

.message input, .message textareal 
width: 300px; 
height: 32px; 
padding: 0 6px; 
color: #657180; 
border: lpx solid #d7dde4; 
border-radius: 4px; 
cursor: text; 
outline: none; 

} 

-message input:focus, .message textarea: focus{ 
border: lpx solid #3399ff; 
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.message textarea( 


) 


height: 60px; 
padding: 4px 6px; 


.message button( 


} 


display: inline-block; 
padding: 6px 15px; 
border: lpx solid #39f; 
border-radius: 4px; 
color: FEET; 
background-color: 439f; 
cursor: pointer; 


outline: none; 


JIT8SEI 


} 


margin-top: 50px; 


.list-item( 


} 


padding: 10px; 


border-bottom: lpx solid 4e3e8ee; 


overflow: hidden; 


.list-item spant 


} 


display: block; 
width: 60px; 
float: left; 
color: $£395rf; 


.list-msgí 


} 


display: block; 
margin-left: 60px; 
text-align: justify; 


.list-msg at 


} 


color: 49ea7b4; 
cursor: pointer; 


float: right; 


.list-msg a:hover( 


color: 439f; 
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.list-nothingí 
text-align: center; 
color: 49ea7b4; 
padding: 20px; 

} 


练习 1: 给 每 条 留言 都 增加 一 个 删除 的 功能 。 
练习 2: 将 该 示例 的 render. 写法 改写 为 template 写法 ， 加 以 对 比 ， 总 结 出 两 者 的 差异 性 ， 深 
刻 理 解 其 使 用 场景 。 


本 章 两 个 实战 的 练习 题 中 都 有 用 template 写法 还 原 render 函数 ， 目 的 是 充分 理解 render 函数 
的 使 用 场景 。 如 果 你 已 经 做 了 还 原 ， 应 该 会 发 现 使 用 template 写法 更 简单 、 可 读 ， 尤 其 是 第 二 个 示 
例 。 的 确 ， 这 两 个 实战 示例 都 更 适合 用 template 来 实现 ， 在 业务 中 ， 生 产 效 率 是 第 一 位 ， 所 以 绝 大 
部 分 业务 代码 都 应 当 用 template 来 完成 。 你 不 用 在 意 性 能 问题 ， 如 果 使 用 了 webpack 做 编译 (后面 
章节 会 介绍 ) ，template 都 会 被 预 编译 为 render 函数 。 

在 本 书 一 开始 介绍 Vuejjs 时 ， 就 提 到 过 它 是 一 个 渐进 式 JavaScript 框架 。Vuejjs 的 基本 用 法 到 
本 章 就 结束 了 ， 到 目前 为 止 ， 所 有 的 示例 都 是 通过 <script> 引 入 Vue.js 和 其 他 文件 来 运行 的 ， 从 下 
一 章 开 始 ， 将 陆续 介绍 前 端 工 程 化 和 Vue 生态 。 
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wan 


高 效 的 开发 离 不 开 基 础 工程 的 搭建 。 本 章 主要 介绍 目前 热门 的 JavaScript 应 用 程序 的 模块 打包 
工具 webpack。 在 开始 学 习 本 章 前 ， 需 要 先 安装 Node.js 和 NPM， 如 果 你 不 熟悉 它们 ， 可 以 先 查 阅 
相关 资料 ， 完 成 安装 并 了 解 NPM 最 基本 的 用 法 。 


Q: 本 章 所 介绍 的 webpack 是 指 webpack 2 版 本 。 
提 示 


10.1 责问 工程 化 与 webpack 


近 几 年 来 ， 前 端 领域 发 展 迅 速 ， 前 端的 工作 早已 不 再 是 切 儿 张 图 那么 简单 ， 项 目 比 较 大 时 ， 
可 能 会 多 人 协同 开发 。 模 块 化 、 组 件 化 、CSS 预 编译 等 概念 也 成 了 经 常 讨 论 的 话题 。 
通常 ， 前 并 日 动 化 (半日 动 化 ) 工程 主要 解决 以 下 问题 : 


e JavaScript. CSS 代码 的 合并 和 压缩 。 
e CSS 预 处 理 : Less、Sass、Stylus 的 编译 。 
e 生成 雪人 图 (CSS Sprite) 。 
e ES6 $ ES 5. 
e 模块 化 。 
如 果 使 用 过 Gulp， 并 且 了 解 RequireJS， 上 面 几 个 问题 应 该 难 不 倒 你 。 只 需 配 置 几 行 代 码 ， 就 
可 以 实现 对 JS 代码 的 合并 与 压缩 。 不 过 ， 经 过 Gulp 合并 压缩 后 的 代码 仍然 是 你 写 的 代码 ， 只 是 局 
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部 变量 名 被 替换 ， 一 些 语法 做 了 转换 而 已 ， 整 体内 容 并 没有 发 生变 化 。 而 本 章 要 介绍 的 前 端 工程 化 
工具 webpack, 打包 后 的 代码 已 经 不 只 是 你 写 的 代码 ， 其 中 夹杂 了 很 多 webpack 自身 的 模块 处 理 代 
码 。 因 此 ， 学 习 webpack 最 难 的 是 理解 “编译 ”的 这 个 概念 ， 否 则 会 一 直 存 在 一 个 疑问 : 为 什么 
要 这 样 做 ? 

图 10-1 是 来 自 webpack 官方 网 站 (https:/webpack.js.org/) 经 典 的 模块 化 示意 图 。 


STATIC ASSETS 


MODULES WITH DEPENDENCIES 





10-1 webpack 模块 化 示意 图 


左边 是 在 业务 中 写 的 各 种 格式 的 文件 ， 比 如 typescript、less、jpg， 还 有 本 章 后 面 要 介绍 的 .vue 
格式 的 文件 。 这 些 格式 的 文件 通过 特定 的 加 载 器 (Loader) 编译 后 ， 最 终 统 一 生成 为 js、.css、.png 
等 静态 资源 文件 。 在 webpack 的 世界 里 , 一 张 图 片 、 一 个 ess 甚至 一 个 字体 , 都 称 为 模块 (Module) , 
彼此 存在 依赖 关系 ，webpack 就 是 来 处 理 模块 间 的 依赖 关系 的 ， 并 把 它们 进行 打包 。 

举 一 个 简单 的 例子 ， 平 时 加 载 CSS 大 多 通过 <link> 标 签 引入 CSS 文件 ， 而 在 webpack 里 ， 直 
接 在 一 个 .js 文件 中 导入 ， 比 如 : 


import 'src/styles/index.css'; 


import 是 ES 2015 的 语法 ,这 里 也 可 以 写成 require('src/styles/index.css') 。 在 打包 时 ，index.css 
会 被 打包 进 一 个 js 文件 里 ， 通 过 动态 创建 <style> 的 形式 来 加 载 ess 样式 ， 当 然 也 可 以 进一步 配置 ， 
在 打包 编译 时 把 所 有 的 css 都 提取 出 来 ， 生 成 一 个 ess 的 文件 ， 后 面 会 详细 介绍 。 

webpack 的 主要 适用 场景 是 单 页 面 富 应 用 (SPA) . SPA 通常 是 由 一 个 html. 文件 和 一 堆 按 需 
加 载 的 js 组 成 ， 它 的 html 结构 可 能 会 非常 简单 ， 比 如 : 


<!DOCTYPE html» 
«html lang-"zh-CN"» 
«head» 
«meta charset-"UTF-8"» 
«title»webpack app«/title» 
«link rel="stylesheet" href-"dist/main.css"» 
«/head» 
«body» 
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«div id-"app"»«/div» 

«script type-"text/javascript" src-"dist/main.js"»«/script» 
«/body» 
«/html» 


看 起 来 很 简单 是 吧 ? 只 有 一 个 <div> 节 点 ,所 有 的 代码 都 集成 在 了 神奇 的 main.js 文件 中 , 理论 
上 它 可 以 实现 像 知 乎 、 淘 宝 这 样 大 型 的 项 目 。 

在 开始 讲解 webpack 的 用 法 前 ， 先 介绍 两 个 ES6 中 的 语法 export 和 import， 因 为 在 后 面 会 大 
量 使 用 ， 如 果 对 和 它 不 了 解 ， 可 能 会 感到 很 困惑 。 

export 和 import 是 用 来 导出 和 导入 模块 的 。 一 个 模块 就 是 一 个 js 文件 ， 它 拥有 独立 的 作用 域 ， 
里 面 定 义 的 变量 外 部 是 无 法 获取 的 。 比 如 将 一 个 配置 文件 作为 模块 导出 ， 示 例 代 码 如 下 : 


// config.js 

var Config = { 
version: '1.0.0' 

); 

export { Config }; 


// config.js 
export var Config = { 
version: '1.0.0' 


}; 
其 他 类 型 (比如 函数 、 数 组 、 常 量 等 ) 也 可 以 导出 ， 比 如 导出 一 个 函数 : 


// add.js 
export function add(a, b) { 
return a + b; 


}; 


模块 导出 后 ， 在 需要 使 用 模块 的 文件 使 用 import 再 导入 ， 就 可 以 在 这 个 文件 内 使 用 这 些 模块 
了 。 示 例 代 码 如 下 : 


// main.js 
import ( Config ) from './config.js'; 


import ( add ) from './add.js'; 


console.log(Config); // { version: '1.0.0' } 


console.log(add(1, 1)); //2 

以 上 几 个 示例 中 ， 导 入 的 模块 名 称 都 是 在 export 的 文件 中 设置 的 ， 也 就 是 说 用 户 必 须 预先 知道 
这 个 名 称 叫 什么 ， 比 如 Config、add。 而 有 的 时 候 ， 用 户 不 想 去 了 解 名 称 是 什么 ， 只 是 把 模块 的 功能 
拿 来 使 用 ， 或 者 想 自 定义 名 称 ， 这 时 可 以 使 用 export default 来 输出 默认 的 模块 。 示 例 代 码 如 下 : 
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// config.js 
export default { 
version: '1.0.0' 


}; 


// add.js 
export default function (a, b) ( 
return a + b; 


}; 


// main.js 
import conf from './config.js'; 


import Add from './add.js'; 


console.log(conf); // { version: '1.0.0' } 
console.log(Add(1, 1)); //2 


如 果 使 用 npm 安装 了 一 些 库 ， 在 webpack 中 可 以 直接 导入 ， 示 例 代码 如 下 : 

import Vue from 'vue'; 

import $ from 'jquery'; 

上 例 分 别 导 入 了 Vue 和 jQuery 的 库 ， 并 且 命 名 为 Vue 和 $， 在 这 个 文件 中 就 可 以 使 用 这 两 个 
模块 。 

export 和 import 还 有 其 他 的 用 法 ， 这 里 不 做 太 详 细 的 介绍 ， 如 果 有 兴趣 ， 可 以 查阅 相关 资料 
进一步 学 习 。 


10.2 webpack 基础 配置 


10.2.1 安装 webpack 5 webpack-dev-server 


本 节 将 从 基础 的 webpack 安装 开始 介绍 ， 逐 步 完 成 对 Vue 工程 的 配置 。 在 开始 学 习 本 节 前 ， 
先 确 保 已 经 安装 了 最 新 版 的 Nodejs 和 NPM， 并 已 经 了 解 NPM 的 基本 用 法 。 

首先 ， 创 建 一 个 目录 ， 比 如 demo， 使 用 NPM 初始 化 配置 : 

npm init 

执行 后 ,会 有 一 系列 选项 ,可 以 按 回 车 键 快速 确认 ,完成 后 会 在 demo 目录 生成 一 个 package.json 
的 文件 。 

之 后 在 本 地 局 部 安装 webpack: 


npm install webpack --save-dev 


-save-dev 会 作为 开发 依赖 来 安装 webpack。 安 装 成 功 后 ， 在 package.json 中 会 多 一 项 配置 : 
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"devDependencies": { 
"Webbpack"i "2.3.2" 
} 


接着 需要 安装 webpack-dev-server, 它 可 以 在 开发 环境 中 提供 很 多 服务 ， 比 如 启动 一 个 服务 器 、 
热 更 新 、 接 口 代理 等 ， 配 置 起 来 也 很 简单 。 同 样 ， 在 本 地 局 部 安装 : 


npm install webpack-dev-server --save-dev 
安装 完成 后 ， 最 终 的 package.json 文件 内 容 为 : 


{ 
"name": "demo", 
"version > "LÍID.D", 
"description": "", 
"main": "index.js", 
"scripts": ( 
"test": "echo \"Error: no test specifiedM" && exit 1" 


} ， 

"duthor"s mme 

"license": "ISC", 

"devDependencies": { 
"webpack": "2.3.2", 


"webpack-dev-server": "^2.4.2" 


} 


如 果 你 的 devDependencies 中 包含 webpack 和 webpack-dev-server， 恭 喜 你 ， 已 经 安装 成 功 ， 
很 快 就 可 以 启动 webpack 工程 了 。 


10.22 ”就 是 一 个 js 文件 而 已 


接 下 来 需要 了 解 webpack 的 一 些 核心 概念 。 

归根 到 底 ，webpack 就 是 一 个 js 配置 文件 ， 你 的 架构 好 或 差 都 体现 在 这 个 配置 里 ， 随 着 需求 
的 不 断 出 现 ， 工 程 配置 也 是 逐渐 完善 的 。 我 们 从 浅 入 深 ， 一 步 步 来 文 持 更 多 的 功能 。 

首先 在 目录 DEMO 下 创建 一 个 js 文件 : webpack.configjs， 并 初始 化 它 的 内 容 : 


var config = { 
F 
module.exports = config; 


这 里 的 module.exports = config; 相当 于 export default config:。 由 于 目前 还 没有 安装 支 
提 示 持 ES6 的 编译 插件 ， 因 此 不 能 直接 使 用 ES6 的 语法 ， 否 则 会 报错 。 
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然后 在 package.json 的 scripts 里 增加 一 个 快速 启动 webpack-dev-server 服务 的 脚本 : 
{ 


FI owes 
"SOFiDES"S 41 

"test": "echo \"Error: no test specifiedM" && exit 1", 

"dev": "webpack-dev-server --open --config webpack.config.js" 
} ， 


} 


当 运 行 npm run dev 命令 时 ， 就 会 执行 webpack-dev-server --open --config webpack.config.js 命 
令 。 其 中 --config 是 指向 webpack-dev-server 读 取 的 配置 文件 路 径 ， 这 里 直接 读 取 我 们 在 上 一 步 创 
HJ webpack.configjs 文件 。--open 会 在 执行 命令 时 自动 在 浏览 器 打开 页 面 ， 默认 地 址 是 
127.0.0.1:8080， 不 过 IP 和 端口 都 是 可 以 配置 的 ， 比 如 : 


{ 
"scripts": I 
"dev": "webpack-dev-server --host 172.172.172.1 --port 8888 --open 
—-config webpack.config.js" 
} 
} 


这 样 访问 地 址 就 改 为 了 172.172.172.1:8888。 一 般 在 局 域 网 下 ， 需 要 让 其 他 同事 访问 时 可 以 这 
样 配置 ， 否 则 用 默认 的 127.0.0.1 (localhost) 就 可 以 了 。 

webpack 配置 中 最 重要 也 是 必 选 的 两 项 是 入 口 (Entry) 和 出 口 COutput) 。 入 口 的 作用 是 告 ; 
webpack 从 哪里 开始 寻找 依赖 ， 并 且 编 译 ， 出 口 则 用 来 配置 编译 后 的 文件 存储 位 置 和 文件 名 。 

在 demo 目录 下 新 建 一 个 空 的 main.js 作为 入 口 的 文件 ， 然 后 在 webpack.config.js 中 进行 入 口 
和 输出 的 配置 : 


var path = require('path'); 


var config = { 
entry: { 
main: './main' 
} ， 
output: { 
path: path.join( dirname, './dist'), 
publicPath: '/dist/', 


filename: 'main.js' 
}; 


module.exports = config; 
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entry 中 的 main 就 是 我 们 配置 的 单 入 口 ，webpack 会 从 main.js 文件 开始 工作 。output 中 path 
选项 用 来 存放 打包 后 文件 的 输出 目录 ， 是 必 填 项 。publicPath 指定 资源 文件 引用 的 目录 ， 如 果 你 的 
资源 存放 在 CDN 上 ， 这 里 可 以 填 CDN 的 网 址 。filename 用 于 指定 输出 文件 的 名 称 。 因 此 ， 这 里 
配置 的 output. 意 为 打包 后 的 文件 会 存储 为 demo/dist/main.js 文件 , 只 要 在 html 中 引入 它 就 可 以 了 。 
在 demo 目录 下 ， 新 建 一 个 index.html 作为 我 们 SPA 的 入 口 : 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
«title»webpack App«/title» 
«/head» 
«body» 
«div id-"app"» 
Hello World. 
«/div» 
«script type-"text/javascript" src-"/dist/main.js"»«/script» 
«/body» 
«/html» 


现在 在 终端 执行 下 面 的 命令 ， 就 会 自动 在 浏览 器 中 打开 页 面 了 : 
npm run dev 


如 果 打 开 的 页 面 跟 图 10-2 一 致 ， 那 么 你 己 经 完成 整个 工程 中 最 重要 的 一 步 了 。 


eoe < 





Hello World. 








10-2 在 浏览 器 中 打开 webpack 项 目 
打开 demo/main.js 文件 ， 添 加 一 行 JavaScript 代码 来 修改 页 面 的 内 容 : 
document.getElementById('app').innerHTML = 'Hello webpack.'; 


保存 文件 ， 回 到 刚才 打开 的 页 面 ， 发 现 页 面 内 容 已 经 变 为 了 “Hello webpack.”。 注 意 ， 此 时 
并 没有 刷新 浏览 器 ， 就 已 经 自动 更 新 了 ， 这 就 是 webpack-dev-server 的 热 更 新 功能 ， 它 通过 建立 一 
个 WebSocket 连接 来 实时 啊 应 代码 的 修改 。 
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在 本 章 第 1 节 中 介绍 过 : 学 习 webpack 最 难 的 是 理解 它 “ 编 译 ” 的 这 个 概念 。 我 们 来 看 一 下 
webpack 编译 出 的 /dist/main.js 究竟 是 什么 。 在 Chrome 浏览 器 开发 者 工具 的 network 视图 中 查看 
main.js 的 内 容 ， 如 图 10-3 所 示 。 
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[x 4 | Elements Network Console Profiles ^ Application Sources Timeline — Audits Security 
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iter Regex 门 Hide data URLs All XHR fS] CSS Img Media Font Doc WS Manifest Other 


Name A4|X Headers Preview Response Cookies Timing 

E j PUFICLLUIIAHIUUULC, CApDUI!I L3, NCURBKJOLM " Cuudic FP & 
| main.js 

— 


inject js 9158. webpack require (36); 
9151 module. exports = _ webpack require (35); 


9154 /kx/ )) 
9155 /x3ooock/ 1); 


2 / 5 requests | 306KB / 307 KB transferred I F.. 





10-3 ”编译 后 的 main.js 文件 


是 不 是 很 震惊 ， 我 们 只 写 了 一 行 JS 代码 ， 却 编译 出 了 9000 多 行 。 不 过 不 用 担心 ， 这 里 面 很 
多 都 是 webpack-dev-server 的 功能 ， 只 在 开发 时 有 效 ， 在 生产 环境 下 编译 就 不 会 这 么 及 肿 了 。 比 如 
执行 下 面 的 命令 进行 打包 : 


webpack --progress --hide-modules 
这 时 会 生成 一 个 demo/dist/main.js 文件 ， 它 只 有 不 到 100 行 ， 而 且 是 没有 压缩 的 。 
10.2.3 ”逐步 完善 配置 文件 


10.2.2 小 节 通 过 配置 入 口 (Entry) 和 出 口 (Output) 已 经 可 以 启动 webpack 项 目 了 ， 不 过 这 并 
不 是 webpack 的 特点 , 如 果 它 只 有 这 些 作用 , 根本 就 不 用 这 么 贱 烦 。 本 节 将 对 文件 webpack.config.js 
进一步 配置 ， 来 实现 更 强大 的 功能 。 

在 webpack 的 世界 里 ， 每 个 文件 都 是 一 个 模块 ， 比 如 .css、.js、.html、.jpg、.less 等 。 对 于 不 
同 的 模块 ， 需 要 用 不 同 的 加 载 器 (Loaders) 来 处 理 ， 而 加 载 器 就 是 webpack 最 重要 的 功能 。 通 过 
安装 不 同 的 加 载 器 可 以 对 各 种 后 级 名 的 文件 进行 处 理 ， 比 如 现在 要 写 一 些 CSS 样式 ， 就 要 用 到 
style-loader 和 css-loader。 下 面 就 通过 NPM 来 安装 它们 : 


npm install css-loader --save-dev 


npm install style-loader --save-dev 


安装 完成 后 ， 在 webpack.config.js 文件 里 配置 Loader， 增 加 对 .css 文件 的 处 理 : 


192 第 2 篇 进 阶 篇 


var config = { 
[f pr 
module: { 
rules: [ 
{ 
test: /N.css$/, 
use: [ 
'style-loader', 


'css-loader' 


): 


module.exports - config; 


在 module 对 象 的 rules 属性 中 可 以 指定 一 系列 的 loaders， 每 一 个 loader 都 必须 包含 test 和 use 
两 个 选项 。 这 段 配置 的 意思 是 说 ， 当 webpack 编译 过 程 中 遇 到 require0 或 import 语句 导入 一 个 后 组 
名 为 .css 的 文件 时 ， 先 将 它 通过 css-loader 转换 ， 再 通过 style-loader 转换 ， 然 后 继续 打包 。use 选 
项 的 值 可 以 是 数组 或 字符 串 ， 如 果 是 数组 ， 它 的 编译 顺序 就 是 从 后 往 前 。 

在 demo 目录 下 新 建 一 个 style.css 的 文件 ， 并 在 main.js 中 导入 : 


/* style.css */ 
#app { 
font-size: 24px; 
color: 4f50; 
} 


// main.js 
import './style.css'; 


document.getElementById('app').innerHTML = 'Hello webpack.'; 


重新 执行 npm run dev 命令 , 可 以 看 到 页 面 中 的 文字 已 经 变 成 红色 , 并 且 字 号 也 大 了 , 如 图 10-4 
所 示 。 

可 以 看 到 ，CSS 是 通过 JavaScript 动态 创建 <style> 标 签 来 写 入 的 ， 这 意味 着 样式 代码 都 已 经 编 
译 在 了 mainjs 文件 里 ， 但 在 实际 业务 中 ， 可 能 并 不 希望 这 样 做 ， 因 为 项 目 大 了 样式 会 很 多 ， 都 放 
在 JS 里 太 占 体积 , 还 不 能 做 缓存 ,这 时 就 要 用 到 webpack 最 后 一 个 重要 的 概念 一 一 插件 (Plugins ) 。 

webpack 的 插件 功能 很 强大 而 且 可 以 定制 。 这 里 我 们 使 用 一 个 extract-text-webpack-plugin 的 插 
件 来 把 散落 在 各 地 的 ess 提取 出 来 ， 并 生成 一 个 main.css 的 文件 ， 最 终 在 index.html 里 通过 <link> 
的 形式 加 载 它 。 


v <body> 


通过 NPM ZEE extract-text-webpack-plugin 插件 : 
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eoo [^ Webpack App 
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npm install extract-text-webpack-plugin --save-dev 


然后 在 配置 文件 中 导入 插件 ， 并 改写 loader 的 配置 : 


// 导入 插件 


var ExtractTextPlugin - require('extract-text-webpack-plugin'); 


var config 


EF xs 


module: 


E 


{ 


rules: [ 


), 


( 
test: /N.css$/, 


use: ExtractTextPlugin.extract(í 


use: 'css-loader', 


fallback: 'style-loader' 


}) 


plugins: | 
// 重 命 名 提取 后 的 css 文件 


new ExtractTextPlugin("main.css") 


module.exports - config; 
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// index.html 
<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
«title»webpack App«c/title» 
«link rel="stylesheet" type="text/css" href-"/dist/main.css"» 


«/head» 


插件 还 可 以 进行 丰富 的 配置 ， 我 们 会 在 后 面 结 合 Vue 使 用 时 详细 介绍 。 现 在 重新 启动 服务 ， 
就 可 以 看 到 <style> 已 经 没有 了 ， 通 过 <link> 引入 的 main.css 文件 已 经 生效 。 

webpack 虽然 概念 比较 新 , 看 似 复杂 ,但 它 只 不 过 是 一 个 js 配置 文件 , 只 要 搞 清楚 入 口 (Entry)、 
HO Output) ~ WMS (Loaders) 和 插件 (Plugins) 这 4 个 概念 ， 使 用 起 来 就 不 那么 困惑 了 。 


10.3” 单 文件 组 件 与 vue-loader 


回顾 一 下 第 7 章 关 于 组 件 的 内 容 ， 我 们 是 如 何 创建 并 使 用 一 个 组 件 的 。 如 果 你 练习 过 几 个 示 
例 ， 肯 定 会 觉得 在 字符 串 模 板 template 选项 里 拼写 字符 串 DOM 非常 费劲 ， 尤 其 是 用 “\ ”换行 。 
Vue.js 是 一 个 渐进 式 的 JavaScript 框架 ， 在 使 用 webpack 构建 Vue 项 目 时 ， 可 以 使 用 一 种 新 的 构建 
模式 : vue 单 文件 组 件 。 

顾名思义 ，.vue 单 文件 组 件 就 是 一 个 后 级 名 为 .vue 的 文件 ,在 webpack 中 使 用 vue-loader 就 可 
以 对 .vue 格式 的 文件 进行 处 理 。 

一 个 .vue 文件 一 般 包 含 3 部 分 ， 即 <template>、<scrip 公 和 <style>， 如 图 10-5 所 示 。 


6 — 6 component.vue 一 ~/Documents/Vue 图 书 / 代 码 / 第 十 章 


> 


{ 


props: { 
name: { 
type: S 
default 





10-5 .vue 单 文件 
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在 componentvue 文件 中 ，<template></template> 之 间 的 代码 就 是 该 组 件 的 模板 HTML, 
<style></style> 之 间 的 是 CSS 样式 ， 示 例 中 的 <style> 标 签 使 用 了 scoped 属性 ， 表 示 当 前 的 CSS 只 
在 这 个 组 件 有 效 ， 如 果 不 加 ， 那 么 div 的 样式 会 应 用 到 整个 项 目 。<style> 还 可 以 结合 CSS 预 编译 
一 起 使 用 ， 比 如 使 用 Less 处 理 可 以 写成 <style lang="less"> 。 

使 用 .vue 文件 需要 先 安 装 vue-loader、vue-style-loader 等 加 载 器 并 做 配置 。 因为 要 使 用 ES6 i 
法 ， 还 需要 安装 babel 和 babel-loader 等 加 载 器 。 使 用 npm 逐个 安装 以 下 依赖 : 


npm install --save vue 

npm install --save-dev vue-loader 

npm install --save-dev vue-style-loader 

npm install --save-dev vue-template-compiler 
npm install --save-dev vue-hot-reload-api 


npm install --save-dev babel 

npm install --save-dev babel-loader 

npm install --save-dev babel-core 

npm install --save-dev babel-plugin-transform-runtime 
npm install --save-dev babel-preset-es2015 


npm install --save-dev babel-runtime 


安装 完成 后 ， 修 改 配置 文件 webpack.config.js 来 支持 对 .vue 文件 及 ES6 的 解析 : 


var path = require('path'); 


var ExtractTextPlugin - require('extract-text-webpack-plugin'); 


var config = { 
entry: { 
main: './main' 
), 
output: { 
path: path.join( dirname, './dist'), 
publicPath: '/dist/', 
filename: 'main.js' 
), 
module: { 
rules: [ 
{ 
test: /N.vue$/, 
loader: 'vue-loader', 
options: { 
loaders: { 
css: ExtractTextPlugin.extract ({ 
use: 'css-loader'!, 
fallback: 'vue-style-loader' 
}) 
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test: /\.js$/, 
loader: 'babel-loader', 


exclude: /node modules/ 


test: /\.css$/, 
use: ExtractTextPlugin.extract (Il 
use: 'css-loader', 


fallback: 'style-loader' 
)) 


} ， 
plugins: | 


new ExtractTextPlugin("main.css") 
F? 


module.exports = config; 


vue-loader 在 编译 .vue 文件 时 ， 会 对 <template>、<script>、<style> 分 别处 理 ， 所 以 在 vue-loader 
选项 里 多 了 一 项 options 来 进一步 对 不 同 语言 进行 配置 。 比 如 在 对 css 进行 处 理 时 ， 会 先 通过 
css-loader 解析 ， 然 后 把 处 理 结 果 再 交 给 vue-style-loader 处 理 。 当 你 的 技术 栈 多 样 化 时 ， 可 以 给 
<template>、<scrip 公 和 <style> 都 指定 不 同 的 语言 , 比如 <template lang="jade"> 和 <style lang="less"> , 
然后 配置 loaders 就 可 以 了 。 

在 demo 目录 下 新 建 一 个 名 为 .babelrc 的 文件 ， 并 与 入 babel 的 配置 ，webpack 会 依赖 此 配置 文 
件 来 使 用 babel 编译 ES6 代码 : 


{ 
"presets": ["es2015"], 
"plugins": ["transform-runtime"], 
"comments": false 


} 


配置 好 这 些 后 ， 就 可 以 使 用 .vue XF T -o WE, 每 个 .vue 文件 就 代表 一 个 组 件 ， 组 件 之 间 可 以 
相互 依赖 。 
在 demo 目录 下 新 建 一 个 app.vue 的 文件 并 写 入 以 下 内 容 : 


<template> 
<div>Hello {{ name }}</div> 
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«/template» 
«script» 
export default { 
data () { 
return { 


name: 'Vue.js' 


} 
«/script» 
«style scoped» 
div( 
color: 4f60; 
font-size: 24px; 


} 


«/style» 
Q: ES 6 语法 提示 : 
e data () ( } 
ig 示 ata 
等 同 于 : 


data: function () ( } 


在 <template> 内 写 的 HTML 写法 完全 同 html 文件 ， 不 用 加 “\” 换行 ，webpack RA 
把 它 编 译 为 Render 函数 的 形式 。 写 在 <style> 里 的 样式 ， 我们 已 经 用 插件 
extract-text-webpack-plugin 配置 过 了 , 最 终 会 统一 提取 并 打包 在 main.css 里 ， 因 为 加 了 
scoped 属性 ， 这 部 分 样式 只 会 对 当前 组 件 app.vue 7f X. 


vue 的 组 件 是 没有 名 称 的 ， 在 父 组 件 使 用 时 可 以 对 它 目 定 义 。 写 好 了 组 件 ， 束 可 以 在 入 口 
main.js 中 使 用 它 了 。 打 开 mainjs 文件 ， 把 内 容 替 换 为 下 面 的 代码 : 


// 导入 Vue 框架 

import Vue from 'vue'; 

// 导入 app.vue 组 件 

import App from './app.vue'; 


// 创建 vue 根 实 例 
new Vue(( 

el: '#app', 

render: h => h (App) 
)); 
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(^ ES 6 语法 提示 : 


提 示 ”一 是 箭头 函数 
render: h — h(App) 等 同 于 : 


render: function (h) { 
return h (App) 
} 


也 等 同 于 : 


render: h => { 
return h(App); 
} 


箭头 函数 里 的 this 指 回 与 普通 函数 是 不 一 样 的 ,箭头 函数 体内 的 this 对 象 就 是 定义 时 所 在 的 对 
象 ， 而 不 是 使 用 时 所 在 的 对 象 ， 比 如 : 


function Timer () { 


this.id - 1; 


var this = this; 

setTimeout (function () { 
console.log (this.id); // undefined 
console.log(_this.id); // 1 

), 1000); 


setTimeout(() => { 
console.log(this.id); // 1 
}, 2000); 


var timer = new Timer(); 

执行 命令 npm run dev， 第 一 个 Vue 工程 就 跑 起 来 了 。 打 开 Chrome 调试 工具 ， 在 Elements 面 
板 可 以 看 到 ，<div id="app"> 已 经 被 组 件 替 换 成 了 : 

«div data-v-8ecbblfa»Hello Vue.js</div> 

对 应 的 main.css 73: 


div[data-v-8ecbblfa](í 
color: #f60; 
font-size: 24px; 


} 


之 所 以 多 了 一 串 data-v-xxx 的 内 容 ， 是 因为 使 用 了 <style scoped> 功 能 ， 如 果 去 掉 scoped, 3 
只 剩 下 <div>Hello Vue.js</div> 了。 
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接 下 来 ， 在 demo 目录 下 再 新 建 两 个 文件 ，title.vue 和 button.vue。 
title. vue: 


«template» 
«hl» 
«a :href="'#' + title"»(( title }}</a> 
«/h1» 
«/template» 
«script» 
export default { 
props: { 
title: { 
type: String 


} 
«/script» 
«style scoped-» 
hl a{ 
color: 4$3399ff; 
font-size: 24px; 
) 
«/style» 


button.vue: 


«template» 
«button Gclick-"handleClick" :style-"styles"» 
«slot»«/slot» 
«/button» 
«/template» 
«script» 
export default { 
props: { 
color: 4 
type: String, 
default: '400ccoe' 


} ， 
computed: { 
styles () { 
return { 


background: this.color 


200 第 2 篇 进 阶 篇 


), 
methods: { 
handleClick (e) { 


this.S$emit('click', e); 


} 
«/script» 
«style scoped-» 
button( 
border: 0; 
outline: none; 
color: 4fff; 
padding: 4px 8px; 
} 
button:active( 
position: relative; 
top: lpx; 
left: lpx; 
} 
«/style» 


改写 根 实例 app.vue 组 件 ， 把 title. vue 和 button. vue. 导入 进来 : 


«template» 
«div» 
«v-title title-"Vue 组 件 化 "></v-title> 
«v-button Qclick="handleClick"> 点 击 按 钮 </v-button> 
</div> 
</template> 
«script» 
// 导入 组 件 
import vTitle from './title.vue'; 


import vButton from './button.vue'; 


export default [( 
components: { 
vTitle, 
vButton 
), 
methods: { 
handleClick (e) { 


console.log (e); 
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} 


«/script» 


Q: ES 6 语法 提示 : 
components: { 


vTitle, 


Rib 
=l 


vButton 


} 
等 同 于 : 
components: { 
vTitle: vTitle, 


vButton: vButton 


} 
对 象 字 面 量 缩写 。 当 对 象 的 key 和 value 名 称 一 致 时 ， 可 以 缩写 成 一 个 。 


导入 的 组 件 都 是 局 部 注册 的 ， 而 且 可 以 自 定 义 名 称 ， 其 他 用 法 和 组 件 一 致 。 
打开 浏览 骨 ， 如 果 已 经 正确 泻 染 出 了 这 两 个 组 件 ， 那 么 茶 喜 你 ， 已 经 进入 Vuejs 的 高 级 领域 
了 ， 可 以 更 高 效 地 开发 Vue 项 目 ， 后 面 的 章节 都 会 基于 webpack 和 单 文件 组 件 展开 。 


10.4 用 于 生产 环境 


我 们 先 对 webpack 进一步 配置 ， 来 支持 更 多 常用 的 功能 。 
安装 url-loader 和 file-loader 来 支持 图 片 、 字 体 等 文件 : 


npm install --save-dev url-loader 


npm install --save-dev file-loader 


// webpack.config.js 
var config = { 
ff saa 
module: { 
rules: [ 
IE ss 
{ 
test: /N.(gifljpglpnglwoff|svgleot|ttf)VN?2.*$/, 


loader: 'url-loader?limit-1024' 
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当 过 到 .gif、 png, ttf 等 格式 文件 时 , url-loader 会 把 它们 一 起 编译 到 dist Hox F, "?limit-1024" 
是 指 如 果 这 个 文件 小 于 1kb， 就 以 base64 的 形式 加 载 ， 不 会 生成 一 个 文件 。 
找 一 张 图 片 ， 保 存 为 demo/images/image.png， 并 在 app.vue 中 加 载 它 : 


<template> 

«div» 
«v-title title-"Vue 组 件 化 "></v-title> 
«v-button Qclick="handleClick"> 点 击 按钮 </v-button> 
<p> 

«img src-"./images/image.png" style-"width: 200px;"» 

«/p» 

«/div» 


«/template» 
效果 如 图 10-6 所 示 。 
ecc < 


Vue 组 件 化 





10-6 在 webpack 项 目 中 使 用 图 片 


介绍 打包 上 线 前 ， 先 来 分 析 webpack 打包 后 的 产物 有 哪些 。 

本 书 所 介绍 和 使 用 的 都 是 单 页面 富 应 用 (SPA) 技术 ， 这 意味 着 最 终 只 有 一 个 html 的 文件 ， 
其 余 都 是 静态 资源 。 实 际 部 团 到 生产 环境 时 ， 一 般 会 将 html 挂 在 后 端 程序 下 ， 由 后 端 路 由 泻 染 这 
个 页 面 ， 将 所 有 的 静态 资源 (css、js、image、iconfont 等 ) 单独 部 署 到 CDN， 当 然 也 可 以 和 后 端 
程序 部 署 在 一 起 ， 这 样 就 实现 了 前 后 端 完 全 分 离 。 

我 们 在 webpack 的 ouput 选项 里 已 经 指定 了 path 和 publicPath， 打 完 包 后 ， 所 有 的 资源 都 会 保 
存在 demo/dist 目录 下 。 

打包 会 用 到 下 面 两 个 依赖 ， 使 用 NPM 安装 : 


npm install --save-dev webpack-merge 


npm install --save-dev html-webpack-plugin 
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为 了 方便 开发 和 生产 环境 的 切换 ， 我 们 在 demo 目录 下 再 新 建 一 个 用 于 生产 环境 的 配置 文件 
webpack.prod.config.]s . 
编译 打包 ， 直 接 执 行 webpack 命令 就 可 以 。 在 package.json 中 ， 再 加 入 一 个 build 的 快捷 脚本 


用 来 打包 : 


"Scriprs"* 1 
"dev": "webpack-dev-server --open --config webpack.config.js", 
"build": "webpack --progress --hide-modules --config 
webpack.prod.config.js" 


} 
先 来 看 一 下 webpack.prod.config.js 的 代码 : 


var webpack = require('webpack'!'); 

var HtmlwebpackPlugin - require('html-webpack-plugin'); 

var ExtractTextPlugin - require('extract-text-webpack-plugin'); 
var merge = require('webpack-merge'); 


var webpackBaseConfig = require('./webpack.config.js'); 


// 清空 基本 配置 的 插件 列表 


webpackBaseConfig.plugins = [];: 


module.exports = merge(webpackBaseConfig, { 
output: 4 
publicPath: '/dist/', 
// 将 入 口 文件 重 命名 为 带 有 20 位 hash 值 的 唯一 文件 
filename: '[name].[hash].js' 
), 
plugins: [ 
new ExtractTextPlugin((í 
// 提取 css， 并 重 命名 为 带 有 20 位 hash 值 的 唯一 文件 
filename: '[name].[hash].css', 
allChunks: true 
), 
// 定义 当前 node 环境 为 生产 环境 
new webpack.DefinePlugin(í 
'process.env': { 


NODE ENV: '"production"' 


}) ， 

// 压缩 js 

new webpack.optimize.UglifyJsPlugin(í 
compress: { 


warnings: false 
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} 

}) 

// 提取 模板 ， 并 保存 入 口 html 文件 

new HtmlWebpackPlugin(í 
filename: '../index prod.html', 
template: './index.ejs', 
inject: false 

)) 

] 
)); 


上 面 安装 的 webpack-merge 模块 就 是 用 于 合并 两 个 webpack 的 配置 文件 ， 所 以 prod 的 配置 是 
在 webpack.config.s 基础 上 扩展 的 。 静 态 资源 在 大 部 分 场景 下 都 有 缓存 (304) ， 更 新 上 线 后 一 般 
都 希望 用 户 能 及 时 地 看 到 内 容 ， 所 以 给 打包 后 的 ess 和 js 文件 的 名 称 都 加 了 20 位 的 hash 值 ， 这 
样 文件 名 就 唯一 了 “比如 main.b3dd20e2dae9d76af86b.js) ， 只 要 不 对 html 文件 设置 缓存 ， 上 线 后 
立即 就 可 以 加 载 最 新 的 静态 资源 。 

html-webpack-plugin 是 用 来 生成 html 文件 的 ， 它 通过 template 选项 来 读 取 指定 的 模板 
index.ejs， 然 后 输出 到 filename 指定 的 目录 ， 也 就 是 demo/index_prod.html。 模 板 index.ejs 动态 设 
置 了 静态 资源 的 路 径 和 文件 名 ， 代 码 如 下 : 


<!DOCTYPE html» 
«html lang-"zh-CN"» 
«head» 
«meta charset-"UTF-8"» 
«title»webpack App«/title» 
«link rel="stylesheet" href-"«$- htmlwebpackPlugin.files.css[0] $»"» 
«/head» 
«body» 
«div id-"app"»«/div» 
«script type-"text/javascript" src-"«$- htmlwebpackPlugin.files.js[0] $»"» 
«/script» 
«/body» 
«/html» 


ejs 是 一 个 JavaScript 模板 库 , 用 来 从 JSON 数据 中 生成 HTML. 字符 串 ,常用 于 Node.js。 
提 IN 
最 后 在 终端 运行 npm run build， 等 待 一 会 就 会 完成 打包 ， 成 功 后 在 demo 下 会 生成 一 个 dist 的 
目录 ， 里 面 就 是 打包 完 的 所 有 静态 资源 。 打 包 过 程 如 图 10-7 所 示 。 
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(E) B5 demo 一 -bash — 91x27 
lianghaodeMacBook-Pro:demo aresn$ npm run build 


> demogi.0.0 build /Users/aresn/Documents/Vue&] 45 /(& B/F + F /demo 
> webpack --progress --hide-modules --config webpack.prod.config.js 


10% bu 10% bu 10% bu 10% b 10% bu 10% bu 10* bu 10% bu 10% bu 10* bu 10% bu 10% bu 11% bu 
11* b 11* bu 11* bu 11* bu 11* bui 11* bu 11* bu 11* bu Hash: 703854fba54f6aelf54b C 
Version: webpack 2.3.2 
Time: 3421ms 


Asset Size Chunks Chunk Names 
69d30ce59836cd2bal1cf4a8f97ec3570.png 1.12 MB [emitted] [big] 
main.703854fba54f6aelf54b.js 58.7 kB 60 [emitted] main 
main.703854fba54f6aelf54b.css 255 bytes 0 [emitted] main 
../index prod.html 314 bytes [emitted] 


lianghaodeMacBook-Pro:demo aresns B 











10-7 打包 过 程 


以 上 就 是 webpack 的 核心 功能 和 主要 配置 。 除 了 本 章 介 绍 的 这 些 内 容 外 ，webpack 还 有 很 多 

高 级 的 配置 和 丰富 的 插件 及 加 载 器 ， 读 者 可 查阅 webpack 文档 进一步 学 习 : https://webpack.js.org/。 
本 章 所 有 的 代码 己 上 传 至 GitHub， 访 问 下 面 的 链接 可 以 查看 到 并 直接 使 用 : 
https://github.com/icarusion/vue-book 


vue-book 下 的 demo 目录 就 是 本 章 的 代码 , 在 该 目录 下 执行 npm install 命令 会 自动 安装 所 有 的 
依赖 ， 然 后 执行 npm run dev 启动 服务 。 


Vue js 提供 了 插件 机 制 ， 可 以 在 全 局 添加 一 些 功能 。 它 们 可 以 简单 到 几 个 方法 、 属 性 ， 也 可 以 
很 复杂 ， 比 如 一 整套 组 件 库 。 本 章 将 介绍 几 个 官方 的 核心 插件 ， 然 后 通过 实战 来 开发 一 个 插件 。 

注册 插件 需要 一 个 公开 的 方法 install, 它 的 第 一 个 参数 是 Vue 构造 器 ,第 二 个 参数 是 一 个 可 先 
的 选项 对 象 。 示 例 代码 如 下 : 


MyPlugin.install = function (Vue, options) { 
// 全 局 注册 组 件 〈 指 令 等 功能 资源 类 似 ) 
Vue.component('component-name', { 

// 组 件 内 容 
)) 
// 添 加 实例 方法 
Vue.prototype.$Notice = function () { 
// 逻辑 ... 
} 
// 添 加 全 局 方法 或 属性 
Vue.globalMethod = function () { 
// 逻辑 ... 
} 
// 添 加 全 局 混合 
Vue.mixin ({ 
mounted: function () { 
H X8... 
} 
)) 
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通过 Vue.use0 来 使 用 插件 : 


Vue.use (MyPlugin) 
// 或 
Vue.use(MyPlugin, { 


// 参数 
} ) 


绝 大 多 数 情况 下 ,开发 插件 主要 是 通过 NPM 发 布 后 给 别人 使 用 的 , 在 自己 的 项 目 中 可 以 直接 
在 入 口 调用 以 上 的 方法 ， 无 须 多 一 步 注册 和 使 用 的 步骤 。 


本 章 示例 是 基于 上 一 章 的 webpack 配置 开始 的 ， 会 在 此 基础 上 进一步 开发 ， 所 以 要 确 
保 先 正确 跑 通 了 上 一 章 的 示例 ， 也 可 以 直接 从 https://github.com/icarusion/vue-book F 
提 示 ARATE 


11.1 ”前 冰 路 由 与 vue-router 


11.1.1 什么 是 前 端 路 由 


上 一 章 介 绍 webpack 时 提 到 它 的 主要 使 用 场景 是 单 页 面 富 应 用 (SPA) ， 而 SPA. 的 核心 就 是 前 
端 路 由 。 那 什么 是 路 由 呢 ? 通俗 地 讲 ， 就 是 网 址 ， 比 如 https//www.iviewui.com/docs/guide/introduce:; 
再 专业 一 点 ， 就 是 每 次 GET 或 者 POST 等 请 求 在 服务 端 有 一 个 专门 的 正则 配置 列表 ， 然 后 匹配 到 具 
体 的 一 条 路 径 后 ， 分 发 到 不 同 的 Controller， 进 行 各 种 操作 ， 最 终 将 html 或 数据 返回 给 前 端 ， 这 就 完 
成 了 一 次 IO。 

当然 ， 目 前 绝 大 多 数 的 网 站 都 是 这 种 后 端 路 由 ， 也 就 是 多 页 面 的 ， 这 样 的 好 处 有 很 多 ， 比 如 
页 面 可 以 在 服务 端 演 染 好 直接 返回 给 浏览 器 , 不 用 等 竺 前端 加 载 任何 js 和 css 就 可 以 直接 显示 网 页 
内 容 ， 再 比如 对 SEO 的 友好 等 。 后 端 路 由 的 缺点 也 是 很 明显 的 ， 就 是 模板 是 由 后 端 来 维护 或 改写 
的 。 前 端 开 发 者 需要 安装 整套 的 后 端 服务 ， 必 要 时 还 得 学 习 像 PHP 或 Java 这 些 非 前 端 语言 来 改写 
html 结构 ， 所 以 html 和 数据 、 逻 辑 混 为 一 谈 ， 维 护 起 来 既 腔 肿 又 麻烦 。 

然后 就 有 了 前 后 端 分 离 的 开发 模式 , 后 端 只 提供 API 来 返回 数据 , 前 端 通过 Ajax 获取 数据 后 ， 
再 用 一 定 的 方式 泻 染 到 页 面 里 ,这 么 做 的 优点 就 是 前 后 端 做 的 事情 分 得 很 清楚 , 后 端 专注 在 数据 上 ， 
前 端 专注 在 交互 和 可 视 化 上 ， 如 果 今 后 再 开发 移动 App， 那 就 正好 能 使 用 一 套 API 了 。 当 然 ， 缺 
点 也 很 明显 ， 就 是 首 屏 演 染 需要 时 间 来 加 载 css 和 js。 这 种 开发 模式 被 很 多 公司 认同 ， 也 出 现 了 很 
多 前 端 技术 栈 ， 比 如 以 jQuery + artTemplate + Seajs(requirejs) + gulp 为 主 的 开发 模式 可 谓 是 万 金 油 
了 。 在 Nodejs 出 现 后 ， 这 种 现象 有 了 改善 ， 就 是 所 谓 的 大 前 端 ， 得 益 于 Node.js 和 JavaScript 的 语 
言 特性 ，html 模板 可 以 完全 由 前 端 来 控制 ， 同 步 或 异步 泻 染 完全 由 前 端 自由 决定 ， 并 且 由 前 端 维 
护 一 套 模板 ， 这 就 是 为 什么 在 服务 端 使 用 artTemplate、React 以 及 Vue 2 的 原因 。 说 了 这 么 多 ， 到 
底 怎样 算是 SPA 呢 ? 其 实 就 是 在 前 后 端 分 离 的 基础 上 ， 加 一 层 前 端 路 由 。 

前 端 路 由 ， 即 由 前 端 来 维护 一 个 路 由 规则 。 实 现 有 两 种 ， 一 种 是 利用 url 的 hash， 就 是 常 说 的 
Hüini GD , JavaScript 通过 hashChange 事件 来 监听 url 的 改变 ，IE7 及 以 下 需要 用 轮 询 ; 另 一 种 就 
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是 HIMLS 的 History 模式 ， 它 使 url 看 起 来 像 普 通 网 站 那样 ， 以 “/” 分 割 ， 没 有 #， 但 页 面 并 没有 
跳 转 ， 不 过 使 用 这 种 模式 需要 服务 端 文 持 ， 服 务 端 在 接收 到 所 有 的 请 求 后 ， 都 指向 同一 个 html X 
件 ， 不 然 会 出 现 404。 因 此 ，SPA 只 有 一 个 html， 整 个 网 站 所 有 的 内 容 都 在 这 一 个 html 里 ， 通 过 
JavaScript 来 处 理 。 

前 端 路 由 的 优点 有 很 多 ， 比 如 页 面 持久 性 ， 像 大 部 分 音乐 网 站 ， 你 都 可 以 在 播放 歌曲 的 同时 
跳 转 到 别 的 页 面 ， 而 音乐 没有 中 断 。 再 比如 前 后 端 彻 底 分 离 。 前 端 路 由 的 框架 通用 的 有 Director 

C https://github.com/flatiron/director ) , 不 过 更 多 还 是 结合 具体 框架 来 用 , 比如 Angular 的 ngRouter， 

React 的 ReactRouter， 以 及 本 节 要 介绍 的 Vue 的 vue-router. 

如 果 要 独立 开发 一 个 前 端 路 由 ， 需 要 考虑 到 页 面 的 可 播 拔 、 页 面 的 生命 周期 、 内 存 管 理 等 
问题 。 


11.1.2 vue-router 基本 用 法 


回顾 第 7 章 7.5.3 小 节 ， 当 时 介绍 了 通过 is 特性 来 实现 动态 组 件 的 方法 。vue-router 的 实现 原 
理 与 之 类 似 ， 路 由 不 同 的 页 面 事实 上 就 是 动态 加 载 不 同 的 组 件 。 
新 建 一 个 目录 router， 复 制 上 一 章 的 代码 并 安装 完成 后 ， 再 通过 NPM 来 安装 vue-router: 


npm install --save vue-router 


在 main.js 里 使 用 Vue.use() 加 载 插件 : 


import Vue from 'vue'; 
import VueRouter from 'vue-router'; 


import App from './app.vue'; 


Vue.use (VueRouter); 


每 个 页 面 对 应 一 个 组 件 ， 也 就 是 对 应 一 个 .vue Xf. TE router 目录 下 创建 views 目录 ， 用 于 存 
放 所 有 的 页 面 ， 然 后 在 views 里 创建 index.vue 和 about.vue 两 个 文件 : 


// index.vue 
<template> 

<div> 首 页 </div> 
</template> 
«script» 


export default { 


} 
«/script» 


// about.vue 

«template» 
<div> 介 绍 页 </div> 

</template> 


«script» 
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export default { 


) 


«/script» 


再 回 到 mainjs 里 ， 完 成 路 由 的 剩余 配置 。 创 建 一 个 数组 来 制定 路 由 匹配 列表 ， 每 一 个 路 由 映 
射 一 个 组 件 : 


const Routers = | 
{ 
path: '/index', 
component: (resolve) -» require(['./views/index.vue'], resolve) 
}, 
{ 
path: '/about', 


component: (resolve) -» require(['./views/about.vue'], resolve) 


(^ ES 6 语法 提示 : 
= 在 ES6 中 ,使 用 let 和 const 命令 来 声明 变量 ,代替 了 var. let 和 const 的 作用 域 是 “ 块 ”， 
ZIN 

比如 : 


console.log(b); //2 
console.log(a); // 报错 : a is not defined 


const 5 let 的 主要 区 别 是 ，const 用 于 声明 常量 ， 也 就 是 声明 后 不 能 再 修改 。 
如 果 一 时 还 不 了 解 它 们 的 其 他 区 别 ， 可 以 先 把 let 和 const 当 作 var 来 理解 。 


Routers 里 每 一 项 的 path 属性 就 是 指定 当前 匹配 的 路 径 ，component 是 映射 的 组 件 。 上 例 的 写 
ik, webpack 会 把 每 一 个 路 由 都 打包 为 一 个 js 文件 ， 在 请 求 到 该 页 面 时 ， 才 去 加 载 这 个 页 面 的 js， 
也 就 是 异步 实现 的 懒 加 载 ( 按 需 加 载 ) ， 这 与 第 7 章 7.5.4 小 节 异 步 组 件 的 用 法 类 似 。 这 样 做 的 好 
处 是 不 需要 在 打开 首页 的 时 候 就 把 所 有 的 页 面 内 容 全 部 加 载 进 来 , 只 在 访问 时 才 加 载 。 如 果 非 要 一 
次 性 加 载 ， 可 以 这 样 写 : 

i 


path: '/index', 


component: require('./views/index.vue') 
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使 用 了 异步 路 由 后 ， 编 译 出 的 每 个 页 面 的 js 都 叫 作 chunk ( 块 ) ， 它 们 命名 默认 是 
0.main.js、1.main.js …… 可 以 在 webpack 配置 的 出 口 output 里 通过 设置 chunkFilename 


提 示 字段 修改 chunk 命名 ， 例 如 : 
output: { 
publicPath: '/dist/', 
filename: '[name].js', 
chunkFilename: '[name].chunk.js' 


} 


有 了 chunk 后 ,在 每 个 页 面 (.vue 文 件 ) 里 写 的 样式 也 需要 配置 后 才 会 打包 进 main.css， 
否则 仍然 会 通过 JavaScript 动态 创建 <style> 标签 的 形式 写 入 。 配 置 插件 : 


// webpack.config.js 
plugins: [ 
new ExtractTextPlugin(í 
filename: '[name].css', 
allChunks: true 
)) 
] 


然后 继续 在 main.js 里 完成 配置 和 路 由 实例 : 


const RouterConfig = { 
// 使 用 HTML5 的 History 路 由 模式 
mode: 'history', 
routes: Routers 

}; 


const router = new VueRouter (RouterConfig); 


new Vuelt 
el: '4app', 
router: router, 
render: h => ( 
return h(App) 
} 
)); 


在 RouterConfig 里 ， 设 置 mode 为 history 会 开启 HTML 5 的 History 路 由 模式 ， 通 过 “/” 设 置 
路 径 。 如 果 不 配 置 mode， 就 会 使 用 “#” 来 设置 路 径 。 开 局 History 路 由 ， 在 生产 环境 时 服务 端 必 
须 进 行 配置 ， 将 所 有 路 由 都 指向 同一 个 html， 或 设置 404 页 面 为 该 html， 否 则 刷新 时 页 面 会 出 现 
404. 

webpack-dev-server 也 要 配置 下 来 支持 History 路 由 ， 在 package.json 中 修改 dev 命令 : 
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"scripts": 1 
"dev": "webpack-dev-server --open --history-api-fallback --config 
webpack.config.js" 


} 


增加 了 --history-api-fallback， 所 有 的 路 由 都 会 指 癌 index.html。 
配置 好 了 这 些 , 最 后 在 根 实例 app.vue 里 添加 一 个 路 由 视图 <router-view> 来 挂 载 所 有 的 路 由 组 件 : 


<template> 
<div> 
<router-view></router-view> 
</div> 
</template> 
<script> 


export default { 


} 

«/script» 

运行 网 页 时 ，<router-view> 会 根据 当前 路 由 动态 泻 染 不 同 的 页 面 组 件 。 网 页 中 一 些 公共 部 分 ， 
比如 顶部 的 导航 栏 、 侧 边 导航 栏 、 底 部 的 版 权 信 息 , 这些 也 可 以 直接 写 在 app.vue 里 ,与 <router-view> 
同 级 。 路 由 切换 时 ， 切 换 的 是 <router-view> 挂 载 的 组 件 ， 其 他 的 内 容 并 不 会 变化 。 

运行 npm run dev 启动 服务 , 然后 访问 127.0.0.1:8080/index 和 127.0.0.1:8080/about 就 可 以 访问 
这 两 个 页 面 了 。 

在 路 由 列表 里 ， 可 以 在 最 后 新 加 一 项 ， 当 访问 的 路 径 不 存在 时 ， 重 定向 到 首页 : 


const Routers - [ 
Pf ss 


i 
pathsz. *** 


redirect: '/index' 


I 


这 样 直接 访问 127.0.0.1:8080， 就 自动 跳 转 到 了 127.0.0.1:8080/index. 

路 由 列表 的 path 也 可 以 带 参 数 ， 比 如 “个 人 主页 ”的 场景 ， 路 由 的 一 部 分 是 固定 的 ， 一 部 分 
是 动态 的 : /user/123456， 其 中 用 户 id“12345$6” 就 是 动态 的 ， 但 它们 路 由 到 同一 个 页 面 ， 在 这 个 
页 面 里 ， 期 望 获取 这 个 id， 然 后 请 求 相关 数据 。 在 路 由 里 可 以 这 样 配置 参数 : 


// main.js 
const Routers = | 
EF zzz 


{ 
path: '/user/:id', 
component: (resolve) => require(['./views/user.vue'], resolve) 
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path: 1*1; 


redirect: '/index' 


]; 
//1£ router/views H3* F, JÆ user.vue 文件 
«template» 

<div>{{ $route.params.id ))«/div» 
«/template» 
«script» 

export default { 

mounted () { 


console.log(this.$route.params.id); 


) 


«/script» 
这 里 的 this.$route 可 以 访问 到 当前 路 由 的 很 多 信息 ,可 以 打印 出 来 看 看 都 有 什么 ,在 开发 中 会 
经 常用 到 里 面 的 数据 。 


因为 配置 的 路 由 是 “mser:id”， 所 以 直接 访问 127.0.0.1:8080/user 会 重 定向 到 /index， 需 要 带 
一 个 id 才能 到 user.vue， 比 如 127.0.0.1:8080/user/123456. 


11.1.3 ” 跳 转 


vue-router 有 两 种 跳 转 页 面 的 方法 ， 第 一 种 是 使 用 内 置 的 <router-link> 组 件 ， 它 会 被 泻 染 为 一 个 
<a> 标 签 : 


// index.vue 
«template» 
«div» 
<h1> 首 页 </h1> 
«router-link to="/about"> 跳 转 到 about«/router-link» 
«/div» 


«/template» 
它 的 用 法 与 一 般 的 组 件 一 样 ，to 是 一 个 prop， 指 定 需要 跳 转 的 路 径 ， 当 然 也 可 以 用 v-bind 动 
态 设置 。 使 用 <router-link> ， 在 HTMLS 的 History 模式 下 会 拦截 点 击 ， 避 免 浏 览 器 重新 加 载 页 面 。 
<router-link> 还 有 其 他 的 一 些 prop， 常 用 的 有 : 
e tag 
tag 可 以 指定 渲染 成 什么 标签 ， 比 如 <router-link to-"/about" tag-"li"^ 泻 染 的 结果 就 是 <li> 
而 不 是 <a>。 
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e replace 
使 用 replace 不 会 留 下 History 记录 ， 所 以 导航 后 不 能 用 后 退 键 返 回 上 一 个 页 面 ， 如 
«router-link to="/about" replace». 

€ active-class 
当 <router-link> 对 应 的 路 由 匹配 成 功 时 ， 会 自动 给 当前 元 素 设置 一 个 名 为 router-link-active 
的 class, it Ei prop: active-class 可 以 修改 默认 的 名 称 。 在 做 类 似 导 航 栏 时 ， 可 以 使 用 该 功 
能 高 亮 显 示 当 前 页 面 对 应 的 导航 菜单 项 ， 但 是 一 般 不 会 修改 active-class， 直 接 使 用 默认 值 
router-link-active 就 可 以 。 


有 时 候 ， 跳 转 页 面 可 能 需要 在 JavaScript 里 进行 ， 类 似 于 window.location.href。 这 时 可 以 用 第 
二 种 跳 转 方法 ， 使 用 router 实例 的 方法 。 比 如 在 about.vue 里 ， 通 过 点 击 事 件 跳 转 : 


// about.vue 
<template> 
<div> 
<h1> 介 绍 页 </h1> 
<button @click="handleRouter"> 跳 转 到 user</button> 
</div> 
</template> 
<script> 
export default { 
methods: { 
handleRouter () { 
this.$router.push('/user/123'); 


} 


«/script» 
$router 还 有 其 他 一 些 方法 : 


e replace 
类 似 于 <router-link> 的 replace 功能 ， 它 不 会 向 history 添加 新 记录 ， 而 是 替换 掉 当 前 的 
history 记录 ， 如 this.$router.replace("/user/123");. 


èe co 
类 似 于 window.history.go0， 在 history 记录 中 向 前 或 者 后 退 多 少 步 ， 参 数 是 整数 ， 例 如 : 
// 后 退 1 页 
this.$router.go(-1); 
// 前 进 2 页 


this.$router.go(2); 
11.1.4 ”高 级 用 法 
本 节 将 从 实际 业务 需求 出 发 ， 逐 步 探索 vue-router 的 高 级 用 法 。 
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先 抛 出 一 个 问题 : 在 SPA 项 目 中 ， 如 何 修改 网 页 的 标题 ? 

网 页 标题 是 通过 <title></title> 来 显示 的 ， 但 是 SPA 只 有 一 个 固定 的 html, 切换 到 不 同 页 面 时 ， 
标题 并 不 会 变化 ， 但 是 可 以 通过 JavaScript 修改 <title> 的 内 容 : 
'! 要 修改 的 网 页 标题 '; 

那么 问题 就 来 了 了， 在 Vue 工程 里 ， 在 哪里 、 在 什么 时 候 修改 标题 呢 ? 比较 容易 想到 的 一 个 办 
法 是 ， 在 每 个 页 面 的 .vue 文件 里 ， 通 过 mounted 钓 子 修改 。 这 种 办 法 没有 问题 ,但 是 页 面 多 了 维护 


window.document.title = 
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起 来 会 很 麻烦 ， 而 且 这 些 逻 辑 都 是 重复 的 。 


比较 理想 的 一 个 思路 就 是 ， 在 页 面 发 生路 由 改变 时 ， 统 一 设置 。vue-router 提供 了 导航 钩子 
beforeEach 和 afterEach， 它 们 会 在 路 由 即将 改变 前 和 改变 后 触发 ， 所 以 设置 标题 可 以 在 beforeEach 


钩子 完成 。 
// main.js 
const Routers = | 
{ 
path: '/index', 
meta: { 
title: ' 首 页 ' 
), 
component: (resolve) 
), 
i 
path: '/about', 
meta: { 
title: 'XT' 
}， 
component: (resolve) 
}, 
{ 
path: '/user/:id', 
meta: { 
title: "个 人 主页 ， 
), 
component: (resolve) 
), 
{ 
path: “天 7 
redirect: '/index' 


]:; 


=> require(['./views/index.vue'], resolve) 


=> require(['./views/about.vue'], resolve) 


=> require(['./views/user.vue'], resolve) 


const router = new VueRouter (RouterConfig); 


router.beforeEach( (to, 


from, 


next) => { 
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window.document.title = to.meta.title; 
next (); 


)); 
SALES TH 3 个 参数 : 


e to 即将 要 进入 的 目标 的 路 由 对 象 。 
e from 当前 导航 即将 要 离开 的 路 由 对 象 。 
e next 调用 该 方法 后 ， 才 能 进入 下 一 个 钩子 。 


路 由 列表 的 meta 字段 可 以 自 定 义 一 些 信息 ， 比 如 我 们 将 每 个 页 面 的 title 写 入 了 meta 来 统一 
维护 ，beforeEach 钩子 可 以 从 路 由 对 象 to 里 获取 meta 信息 ， 从 而 改变 标题 。 

有 了 这 两 个 钩子 ， 还 能 做 很 多 事情 来 提升 用 户 体验 。 比 如 一 个 页 面 较 长 ， 滚 动 到 茶 个 位 置 ， 
再 跳 转 到 另 一 个 页 面 ， 滚 动 条 默认 是 在 上 一 个 页 面 停留 的 位 置 ， 而 好 的 体验 肯定 是 能 返回 顶端 。 通 
T afterEach 就 可 以 实现 : 

// main.js 

KE 

router.afterEach((to, from, next) => { 

window.scrollTo(0, 0); 

Ds 

类 似 的 需求 还 有 ， 从 一 个 页 面 过 渡 到 另 一 个 页 面 时 ， 可 以 出 现 一 个 全 局 的 Loading 动画 ， 等 
到 新 页 和 面 加 载 完 后 再 结束 动画 。 

next() 方 法 还 可 以 设置 参数 ， 比 如 下 面 的 场景 。 

茶 些 页 面 需要 校 验 是 否 登 录 ， 如 果 登 录 了 就 可 以 访问 ， 人 否则 跳 转 到 登录 页 。 这 里 我 们 通过 
localStorage 来 简易 判断 是 否 登 录 ， 示 例 代码 如 下 : 


router.beforeEach((to, from, next) => ( 
if (window.localStorage.getItem('token')) { 
next (); 
) else { 
next('/login'); 
} 
)); 


next() 的 参数 设置 为 false 时 ， 可 以 取消 导航 ， 设 置 为 具体 的 路 径 可 以 导航 到 指定 的 页 面 。 

正确 地 使 用 好 导航 钩子 可 以 方便 实现 一 些 全 局 的 功能 ， 而 且 便 于 维护 。 更 多 的 可 能 需要 在 业 
务 中 不 断 探索 。 

本 节 所 有 的 代码 己 上 传 至 GitHub， 访 问 下 面 的 链接 可 以 查看 到 并 直接 使 用 : 

https://github.com/icarusion/vue-book 


vue-book 下 的 router 目录 就 是 本 节 的 代码 ,在 该 目录 下 执行 npm install 命令 会 自动 安装 所 有 的 
依赖 ， 然 后 执行 npm run dev 启动 服务 。 
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拓展 阅读 建议 : vue-router 还 有 一 些 不 利用 或 可 不 用 的 功能 ， 比 如 藤 套 路 由 、 路 由 的 命名 、 视 
图 的 命名 等 ， 读 者 可 以 查阅 文档 进一步 学 习 ， 网 址 为 https://router.vuejs.org/。 


11.2 ”状态 管理 与 Vuex 


11.2.1 状态 管理 与 使 用 场景 


回顾 第 7 章 的 7.3.3 小 节 ， 我 们 在 介绍 非 父 子 组 件 〈 也 就 是 跨 级 组 件 和 兄弟 组 件 ) 通信 时 ， 使 
HY bus (中 央 事 件 总 线 ) 的 一 个 方法 ， 用 来 触发 和 接收 事件 ， 进 一 步 起 到 通信 的 作用 。Vuex 所 
解决 的 问题 与 bus 类 似 ， 它 作为 Vue 的 一 个 插件 来 使 用 ， 可 以 更 好 地 管理 和 维护 整个 项 目的 组 件 

一 个 组 件 可 以 分 为 数据 (model) 和 视图 (view) ， 数 据 更 新 时 ， 视 图 也 会 自动 更 新 。 在 视图 
中 又 可 以 绑 定 一 些 事件 ， 它 们 触发 methods 里 指定 的 方法 ， 从 而 可 以 改变 数据 、 更 新 视图 ， 这 是 一 
个 组 件 基本 的 运行 模式 。 比 如 下 面 的 示例 : 


// message.vue 
«template» 
«div» 
{{ message }} 
«button @click="handleClick">Change word</button> 
</div> 
</template> 
«script» 
export default { 
data () { 
return { 
message: 'Hello World.' 
}; 
} ， 
methods: { 
handleClick () ( 
this.message - 'Hello Vue.'; 
} 
} 
}; 
</script> 


这 里 的 数据 message 和 方法 handleClick 只 有 在 message.vue 组 件 里 可 以 访问 和 使 用 ， 其 他 的 
组 件 是 无 法 读 取 和 修改 message 的 。 但 是 在 实际 业务 中 , 经 常 有 跨 组 件 共 享 数 据 的 需求 , 因此 Vuex 
的 设计 就 是 用 来 统一 管理 组 件 状态 的 ， 它 定义 了 一 系列 规范 来 使 用 和 操作 数据 ， 使 组 件 应 用 更 加 


使 用 Vuex 会 有 一 定 的 门 榄 和 复杂 性 , 它 的 主要 使 用 场景 是 大 型 单 页 应 用 ， 更 适合 多 人 协同 开 
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发 。 如 果 你 的 项 目 不 是 很 复杂 ， 或 者 希望 短期 内 见效 ， 你 需要 认真 考虑 是 人 否 真 的 有 必要 使 用 Vuex， 
也 许 像 7.3.3 小 节 介 绍 的 bus 方法 就 能 很 简单 地 解决 你 的 需求 。 当 然 ， 并 不 是 所 有 大 型 多 人 协同 开 
发 的 SPA 项 目 都 必须 使 用 Vuex， 事 实 上 ， 我 们 在 一 些 生产 环境 中 只 是 使 用 bus 也 能 实现 得 很 好 ， 
用 与 否 主 要 取决 于 你 的 团队 和 技术 储备 。 

每 一 个 框架 的 诞生 都 是 用 来 解决 具体 问题 的 。 虽 然 bus 已 经 可 以 很 好 地 解决 跨 组 件 通 信 ， 但 
它 在 数据 管理 、 维 护 、 架 构 设 计 上 还 只 是 一 个 简单 的 组 件 ， 而 Vuex 却 能 更 优雅 和 高 效 地 完成 状态 


管理 。 
11.2.2 Vuex 基本 用 法 


本 节 是 在 上 一 节 的 vue-router 基础 之 上 进行 开发 的 ， 在 本 地 创建 目录 vuex， 然 后 复制 上 一 节 
的 所 有 代码 ， 或 直接 从 https://github.conyicarusion/vue-book 下 载 后 ， 使 用 router 目录 下 的 代码 。 
首先 通过 NPM 安装 Vuex: 


npm install --save vuex 


它 的 用 法 与 vue-router 类 似 ， 在 mainjs 里 ， 通 过 Vue.use() 使 用 Vuex: 


import Vue from 'vue'; 
import VueRouter from 'vue-router'; 
import Vuex from 'vuex'; 


import App from './app.vue'; 


Vue.use (VueRouter); 


Vue.use (Vuex); 


// 路 由 配置 
// RÈ... 


const store = new Vuex.Store(í 


// vuex 的 配置 
)); 


new Vue({ 
el: '4app', 
router: router, 
// 使 用 vuex 
store: store, 
render: h => { 


return h (App) 


)); 


仓库 store 包含 了 应 用 的 数据 (状态 ) 和 操作 过 程 。Vuex 里 的 数据 都 是 啊 应 式 的 ， 任 何 组 件 使 
用 同一 store 的 数据 时 ， 只 要 store 的 数据 变化 ， 对 应 的 组 件 也 会 立即 更 新 。 
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数据 保存 在 Vuex 选项 的 state 字段 内 ， 比 如 要 实现 一 个 计数 器 ， 定 义 一 个 数据 count， 初 始 值 
为 0: 


const store = new Vuex.Storel(t{ 
state: { 


count: O0 


I 
在 任何 组 件 内 ， 可 以 直接 通过 $store.state.count 读 取 : 


// index.vue 
«template» 
«div» 
<h1> 首 页 </h1> 
{{ $store.state.count }} 
</div> 


</template> 
直接 写 在 template 里 显得 有 点 乱 ， 可 以 用 一 个 计算 属性 来 显示 : 


<template> 
«div» 
<h1> 首 页 </h1> 
(( count ])) 
«/div» 
«/template» 
«script» 
export default { 
computed: { 
count () { 


return this.$store.state.count; 


} 
«/script» 


现在 访问 首页 ， 计 数 0 已 经 可 以 显示 出 来 了 。 

EAA, KA store 的 数据 只 能 读 取 , 不 能 手动 改变 ,改变 store 中 数据 的 唯一 途径 就 是 显 式 
地 提交 mutations. 

mutations 是 Vuex 的 第 二 个 选项 ， 用 来 直接 修改 state 里 的 数据 。 我 们 给 计数 器 增加 2 个 
mnutations， 用 来 加 1 和 减 1: 

// main.js 

const store = new Vuex.Store(í 


state: { 
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count: 0 
}, 
mutations: { 
increment (state) { 
state.count ++}; 
), 
decrease (state) { 


sState.count --; 


}); 


在 组 件 内 ， 通 过 this.$store.commit 方法 来 执行 mutations。 在 index.vue 中 添加 两 个 按钮 用 于 加 
TU: 


«template» 
«div» 
<h1> 首 页 </h1> 
(( count }} 
«button Gclick-"handleIncrement"»-41«/button» 
«button Gclick-"handleDecrease"»-1«/button» 
«/div» 
«/template» 
«script» 
export default { 
computed: { 
count () { 


return this.$store.state.count; 


); 
methods: ( 
handleIncrement () { 


this.$store.commit('increment'); 


); 
handleDecrease () { 


this.$store.commit('decrease'); 


} 
</script> 
这 看 起 来 很 像 JavaScript 的 观察 者 模式 ， 组 件 只 负责 提交 一 个 事件 名 ，Vuex 对 应 的 mutations 
来 完成 业务 逻辑 。 
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mutations 还 可 以 接受 第 二 个 参数 ， 可 以 是 数字 、 字 符 串 或 对 象 等 类 型 。 比 如 每 次 增加 的 不 是 
1， 而 是 指定 的 数量 ， 可 以 这 样 改写 : 


// main.js， 部 分 代码 省 略 
mutations: { 
increment (state, n = 1) { 


state.count += n; 


ES 6 语法 提示 : 
函数 的 参数 可 以 设 定 默认 值 ， 当 没有 传 入 该 参数 时 ， 使 用 设置 的 值 。 比 如 上 例 的 
提 示 increment (state, n = 1)# F) F: 


increment (state, n) { 


n-nll 1; 


// index.vue， 部 分 代码 省 略 
«template» 
«div» 
<button Gclick-"handleIncrementMore"»-45«/button» 
«/div» 
«/template» 
<script> 
export default { 
methods: { 
handleIncrementMore () { 


this.$store.commit('increment', 5); 


} 


«/script» 


当 一 个 参数 不 够 用 时 ， 可 以 传 入 一 个 对 象 ， 无 限 扩展 。 


提交 mutation 的 另 一 种 方式 是 直接 使 用 包含 type 属性 的 对 象 ， 比 如 : 


// main.js 
mutations: { 
increment (state, params) { 


state.count += params.count; 
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// index.vue 
this.$store.commit(( 


type: 'increment', 


count: 10 


iix, mutation 里 尽量 不 要 异步 操作 数据 。 如 果 异 步 操 作 数 据 了 ， 组 件 在 commit Æ, 


数据 不 能 立即 改变 ， 而 且 不 知道 什么 时 候 会 改变 。 在 下 一 节 的 actions 里 会 介绍 如 何 处 
ET mes. 


11.2.3 ”高 级 用 法 


Vuex 还 有 其 他 3 个 选项 可 以 使 用 : getters、actions、modules。 
有 这 样 的 一 个 场景 : Vuex 定义 了 某 个 数据 list， 它 是 一 个 数组 ， 比 如 : 


// main.js， 部 分 代码 省 略 
const store = new Vuex.Storel(t{ 


state: { 


tist: LI, 5; B, I0, 30, 50] 
)); 


如 果 只 想得到 小 于 10 的 数据 ， 最 容易 想到 的 方法 可 能 是 在 组 件 的 计算 属性 里 进行 过 滤 。 示 例 
代码 如 下 : 


// index .vue， 部 分 代码 省 略 


<template> 
<div> 
«div»(( list ))«/div» 
«/div» 
«/template» 
«script» 
export default { 
computed: { 


list D { 


return this.$store.state.list.filter(item => item < 10); 


) 
) 


«/script» 


这 样 写 完全 没有 问题 。 但 如 果 还 有 其 他 的 组 件 也 需要 过 滤 后 的 数据 时 ， 就 得 把 computed 的 代 
码 完 全 复制 一 份 , 而 且 需 要 修改 过 滤 方 法 时 , 每 个 用 到 的 组 件 都 得 修改 ,这 明显 不 是 我 们 期 望 的 结 
果 。 如 果 能 将 computed 的 方法 也 提取 出 来 就 方便 多 了 ，getters 就 是 来 做 这 件 事 的 。 

使 用 getters 改写 上 面 的 示例 : 
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// main.js, 


部 分 代码 省 略 


const store 


new Vuex.Store(( 
state: { 


list: [1, 5, 8, 10, 30, 50] 
), 


getters: [ 


filteredList: state => { 


return state.list.filter(item => item < 10); 
] 


// index .vue， 部 分 代码 省 略 


<template> 
<div> 
<div>{{ list }}</div> 
</div> 
</template> 


<script> 


export default { 
computed: { 


list () ( 
return this.$store.getters.filteredList; 
} 


} 


«/script» 


这 种 用 法 与 组 件 的 计算 属性 非常 像 .getter 也 可 以 依赖 其 他 的 getter, 把 getter 作为 第 二 个 参数 。 
比如 再 写 一 个 getter， 计 算出 list 过 滤 后 的 结果 的 数量 : 
// main.js 


const store = new Vuex.Storel(t 
state: { 


list: [1, 5, 8, 10, 30, 50] 
), 


getters: [ 


filteredList: state => { 


return state.list.filter(item => item < 10); 
); 


listCount: (state, getters) => { 


return getters.filteredList.length; 
} 
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2 


// index.vue 
«template» 
«div» 
<div>{{ list ))«/div» 
<div>{{ listCount }}</div> 
</div> 
</template> 
<script> 
export default { 
computed: { 
list () { 
return this.$store.getters.filteredList; 
), 
listCount () ( 


return this.$store.getters.listCount; 


} 


«/script» 


上 一 节 提 到 , mutation 里 不 应 该 异步 操作 数据 , 所 以 有 了 actions 选项 。action 与 mutation 很 像 ， 
不 同 的 是 action 里 面 提交 的 是 mutation， 并 且 可 以 异步 操作 业务 逻辑 。 
action 在 组 件 内 通过 $store.dispatch 触发 ， 例 如 使 用 action 来 加 1: 


// main.js 部 分 代码 省 略 
const store = new Vuex.Store({ 
state: { 
count: 0 
}, 
mutations: { 
increment (state, n = 1) { 


sState.count += n; 


}, 
actions: { 
increment (context) { 


context.commit('increment'); 


}); 


// index.vue 部 分 代码 省 略 
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«template» 
«div» 
(( count }} 
«button QGclick-"handleActionIncrement"»action -41«/button» 
«/div» 
«/template» 
«script» 
export default { 
computed: { 
count () d4 
return this.$store.state.count; 


); 
methods: { 
handleActionIncrement () { 


this.$store.dispatch('increment'); 


} 


«/script» 

是 不 是 觉得 有 点 多 此 一 举 ? 没 错 ， 就 目前 示例 来 看 的 确 是 ， 因 为 可 以 直接 在 组 件 commit 
mutation， 没 必要 通过 action 中 转 一 次 。 但 是 加 了 异步 就 不 一 样 了 ， 我 们 用 一 个 Promise 在 1 秒 钟 
后 提交 mutation， 示 例 代 码 如 下 : 

// main.js 部 分 代码 省 略 


const store = new Vuex.Store(í 
state: { 
count: O0 
b, 
mutations: { 
increment (state, n = 1) { 


sState.count += n; 


b, 
actions: { 
asyncIncrement (context) { 
return new Promise (resolve => { 
setTimeout(() => { 
context.commit('increment'); 
resolve(); 


), 1000) 
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)]):; 


// index.vue 部 分 代码 省 略 
«template» 
«div» 
[(( count ])) 
«button Gclick-"handleAsyncIncrement"»async -*1«/button» 
«/div» 
«/template» 
«script» 
export default { 
computed: { 
count () { 


return this.$store.state.count; 


), 
methods: { 
handleAsyncIncrement () { 
this.$store.dispatch('asyncIncrement').then(() => ( 


console.log(this.$store.state.count); // 1 


}); 


} 


«/script» 


ES 6 语法 提示 : 

Promise 是 一 种 异步 方案 ， 它 有 3 种 状态 : Pending (进行 中 ) 、Resolved (已 完成 ) 、 
提 示 Rejected (已 失败 ) 。 比 如 下 面 的 示例 ， 通 过 判断 一 个 随机 数 是 否 大 于 0.5 来 模拟 完成 

与 失败 : 


const promise = new Promise((resolve, reject) => { 
setTimeout(() => ( 
const random - Math.random(); 
if (random > 0.5) { 
resolve (random); 
} else { 
reject (random); 
} 
), 1000); 
)); 
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promise.then((value) => { 
console.log('success', value); 

)).catch((error) => { 
console.log('fail', error); 


}); 
如 果 暂 时 还 不 理解 Promise， 异 步 action 的 示例 还 可 以 用 普通 的 回调 来 实现 : 


// main.js 
actions: { 
asyncIncrement (context, callback) { 
setTimeout(() => { 
context.commit('increment'); 
callback(); 
), 1000); 


// index.vue 
methods: { 
handleAsyncIncrement () { 
this.S$store.dispatch('asyncIncrement', () => { 


console.log(this.$store.state.count); // 1 


}); 


} 


mutations. actions 看 起 来 很 相似 ， 可 能 会 觉得 不 知道 该 用 哪个 ， 但 是 Vuex 很 像 是 一 种 与 开发 
者 的 约定 ， 所 以 涉及 改变 数据 的 ， 就 使 用 mutations， 存 在 业务 逻辑 的 ， 就 用 actions。 至 于 将 业务 
逻辑 放 在 action 里 还 是 Vue 组 件 里 完成 ， 就 需要 根据 实际 场景 拿捏 了 。 

最 后 一 个 选项 是 modules， 它 用 来 将 store 分 割 到 不 同 模块 。 当 你 的 项 目 足 够 大 时 ，store 里 的 
state. getters, mutations. actions 会 非常 多 ， 都 放 在 mainjs 里 显得 不 是 很 友好 ， 使 用 modules 可 以 
把 它们 写 到 不 同 的 文件 中 。 每 个 module 拥有 目 己 的 state、getters、mutations、actions， 而 且 可 以 
ZERE. 


const moduleA = { 
state: TI ... P 


mutations: { ... ], 
actions: fI ess fy 


getters: { ... ] 


const moduleB = { 
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state: { i. le 
mutations: { asa Jy 
actions: { ... ] 


) 


const store = new Vuex.Store(í 
modules: ( 
a: moduleA, 
b: moduleB 


)) 


store.state.a // moduleA 的 状态 

store.state.b // moduleB 的 状态 

module 的 mutation 和 getter 接收 的 第 一 个 参数 state 是 当前 模块 的 状态 。 在 actions 和 getters 
中 ， 还 可 以 接收 一 个 参数 rootState， 来 访问 根 节点 的 状态 。 比 如 getters 中 rootState 将 作为 第 3 个 
参数 : 

const moduleA = { 


state: { 


count: 0 


); 
getters: [ 
sumCount (state, getters, rootState) { 


return state.count + rootState.count; 


) 


} 

本 节 所 有 的 代码 己 上 传 至 GitHub， 访 问 下 面 的 链接 可 以 查看 到 并 直接 使 用 : 

https://github.com/icarusion/vue-book 

vue-book 下 的 vuex 目录 就 是 本 节 的 代码 ， 在 该 目录 下 执行 npm install 命令 会 自动 安装 所 有 的 
依赖 ， 然 后 执行 npm run dev 启动 服务 。 

拓展 阅读 建议 : 可 以 到 Vues 文档 进一步 阅读 它 更 多 的 用 法 : https:/vuex.vuejs.org 。 


11.3 Ji: 中 央 事 件 总 线 插件 vue-bus 


在 第 7 章 的 7.3.3 小 节 介 绍 了 中 央 事件 总 线 bus 的 用 法 ， 它 作为 一 个 简单 的 组 件 传递 事件 ， 用 
于 解决 跨 级 和 兄弟 组 件 通 信 的 问题 。 本 节 将 使 用 该 思想 将 其 封装 为 一 个 Vue 的 插件 ， 可 以 在 所 有 
组 件 间 随意 使 用 ， 而 不 需要 导入 bus. 
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本 节 是 在 上 一 节 的 Vuex 基础 之 上 进行 开发 的 ， 在 本 地 创建 目录 vue-bus， 然 后 复制 上 一 节 的 
所 有 代码 ， 或 直接 从 https://github.com/icarusion/vue-book 下 载 后 ， 使 用 vuex 目录 下 的 代码 。 

完成 基本 安装 后 , 在 vue-bus 目录 下 新 建 vue-bus.js 文件 。vue-bus 插件 像 vue-router 和 Vuex 一 
样 ， 给 Vue 添加 一 个 属性 $bus， 并 代理 $emit, $on, $off 三 个 方法 。 代 码 如 下 : 

// vue-bus.js 


const install = function (Vue) { 


const Bus = new Vue (1{ 


methods: { 
emit (event, ...args) ( 
this.$emit(event, ...args); 


}, 
on (event, callback) { 


this.$on(event, callback); 


}, 
off (event, callback) { 
this.$off (event, callback); 


)); 
Vue.prototype.$bus = Bus; 


}; 
export default install; 


Q: ES 6 语法 提示 : 
4j emit (event, args)? $...args 是 函数 参数 的 解构 。 因为 不 知道 组 件 会 传递 多 少 个 参数 进 
E 示 。 来 ,使 用 ...args 可 以 把 从 当前 参数 (这 里 是 第 二 个 ) 到 最 后 的 参数 都 获取 到 。 


在 main.js 中 使 用 插件 : 
// main.js， 部 分 代码 省 略 


import VueBus from './vue-bus'; 


Vue.use (VueBus) ; 


在 views 目录 下 新 建 一 个 组 件 Counter.vue: 


// views/counter.vue 
«template» 
«div» 
(( number }} 
<button @click="handleAddRandom"> 随 机 增加 </button> 
</div> 
</template> 


«script» 
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export default { 
props: { 
number: { 
type: Number 


), 
methods: { 


handleAddRandom () { 
// 随机 获取 1-100 中 的 数 


const num = Math.floor(Math.random () * 100 + 1); 


this.$bus.emit('add', num); 


J 
</script> 


在 index.vue 中 使 用 Counter 组 件 并 监听 来 日 counter.vue 的 目 定义 事件 : 
// index .vue， 部 分 代码 省 略 


<template> 
<div> 
随机 增加 : 
<Counter :number="number"></Counter> 
</div> 
</template> 
<script> 


import Counter from './counter.vue'; 


export default { 
components: { 


Counter 


), 


created () { 
this.$bus.on('add', num => { 


this.number += num; 


} 


«/script» 
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vue-bus 的 代码 比较 简单 ， 只 有 不 到 20 行 ， 但 它 却 解决 了 路 组 件 通 信 的 问题 ， 而 且 通 过 插件 
的 形式 使 用 后 ， 所 有 组 件 都 可 以 直接 使 用 $bus， 而 无 须 每 个 组 件 都 导入 bus 组 件 。 

使 用 vue-bus 有 两 点 需要 注意 ， 第 一 是 $bus.on 应 该 在 created HF AEH, WREE mounted 使 
用 ， 它 可 能 接收 不 到 其 他 组 件 来 自 created 钓 子 内 发 出 的 事件 ; 第 二 点 是 使 用 了 $bus.on， 在 
beforeDestroy 钩子 里 应 该 再 使 用 $bus.o 人 在 解除 ， 因 为 组 件 销毁 后 ， 就 没 必 要 把 监听 的 句柄 储存 在 
vue-bus 里 了 ， 所 以 index.vue 可 以 适当 改写 为 : 


<template> 
<div> 
随机 增加 : 
<Counter :number="number"></Counter> 
</div> 
</template> 
<script> 


import Counter from './counter.vue'; 


export default { 
components: { 
Counter 
), 
methods: { 
handleAddRandom (num) { 


this.number += num; 


), 
data () { 
return { 
number: 0 


b, 
created () { 
this.$bus.on('add', this.handleAddRandom); 


), 
beforeDestroy () { 
this.$bus.off('add', this.handleAddRandom); 


} 
} 


«/script» 
本 节 所 有 的 代码 己 上 传 至 GitHub， 访 问 下 面 的 链接 可 以 查看 到 并 直接 使 用 : 


https://github.com/icarusion/vue-book 
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vue-book 下 的 vue-bus 目录 就 是 本 节 的 代码 , 在 该 目录 下 执行 npm install 命令 会 自动 安装 所 有 
的 依赖 ， 然 后 执行 npm run dev 启动 服务 。 


练习 : 学 习 XMLHttpRequest (E) XHRO 相关 知识 ， 开 发 一 个 简单 的 $ajax 插件 ， 用 于 异步 获 
取 服 务 端 数 据 。 以 下 实现 Ajax 的 代码 可 以 作为 参考 : 


const ajax = function (options = {}) ( 


options.type - (options.type || 'GET').toUpperCase(); 


let data = []; 
for(let i in options.data)í 
data.push(encodeURIComponent (i) + 


'=" + encodeURIComponent (options.data[i])); 


} 
data = data.join('&'); 


const xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () { 
if (xhr.readyState === 4) { 
const status = xhr.status; 
if (status >= 200 && status < 300) { 
options.success && 


options.success(JSON.parse(xhr.responseText), 
xhr.responseXMLD); 


) else { 


options.error && options.error (status); 


); 

if (options.type === 'GET') { 
xhr.open('GET', options.url + '?' 二 data, true); 
xhr.send (null); 

) else if (options.type === 'POST') { 
xhr.open('POST', options.url, true); 
xhr.setRequestHeader ( 

'Content-Type', 
'application/x-www-form-urlencoded'); 


xhr.send(data); 
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基础 篇 和 进 阶 篇 的 内 容 已 经 涵盖 了 Vue 2 绝 大 部 分 知识 点 ， 如 果 你 已 经 认真 阅读 过 ， 那 么 是 
时 候 实 战 了 。 从 下 一 章 开 始 ， 会 从 不 同 的 几 个 维度 来 讲述 一 些 实战 案例 。 

第 12 章 将 介绍 基于 Vue 2 的 一 套 高 质量 UI 组 件 库 一 一 iView。iView 是 一 整套 的 前 端 解决 方 
案 ， 本 书 会 介绍 它 的 几 个 具有 代表 性 的 组 件 设计 思想 并 做 代码 剖析 。 

第 13 章 将 实现 一 个 Vue 版 的 知 乎 日 报 ， 会 用 到 webpack、vue-router、vuex。 

第 14 章 将 开发 一 个 简易 的 电 商 网 站 项 目 ， 包 括 商 品 列表 、 详 情 、 购 物 车 等 常用 功能 ， 同 样 基 
T webpack、vue-router 和 vuex. 

实战 篇 的 章节 代码 示例 要 比 基 础 篇 和 进 阶 篇 稍 有 难度 ， 书 写 风 格 完全 基于 ES 6， 所 以 需要 掌 
握 进 阶 篇 中 所 有 的 ES 6 语法 提示 的 内 容 。 每 一 章 的 完整 代码 都 提交 在 GitHub, 访问 地 址 也 会 在 章 
末 提 及 。 

实战 篇 的 所 有 内 容 都 是 基于 真实 的 生产 环境 考虑 的 ， 所 涉及 的 内 容 涵 盖 Vue.js 绝 大 部 分 APL 
它 很 有 借鉴 意义 , 但 并 不 一 定 是 适合 你 的 最 佳 实践 。 所 以 在 你 的 项 目 中 ,可 以 根据 实际 情况 来 组 织 
代码 架构 。 比 如 你 完全 可 以 不 用 ES 6， 而 只 是 使 用 ES 5 就 足以 ; 再 比如 可 以 不 使 用 vuex, mH 
bus (RE; 当然， 如 果 你 的 团队 技术 不 错 ， 可 以 使 用 TypeScript 等 语言 来 开发 。 总 之 ， 实 战 篇 更 多 
提供 的 是 灵感 ， 而 你 需要 在 技术 选 型 上 找到 平衡 。 
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iView 是 一 套 基于 Vuejs 2 的 开源 UI 组 件 库 ， 主 要 服务 于 PC 界面 的 中 后 台 产 品 。 简 单 地 理 
解 ， 它 是 深度 封装 的 40 多 个 常用 业务 组 件 ， 比 如 Input. Checkbox, Select, Table; 但 它 同 时 也 是 
一 整套 的 前 端 解决 方案 ， 包 括 设 计 规范 、 基 础 样式 ， 支 持 服务 端 泻 染 (SSR) ， 同 时 提供 了 可 视 化 
脚手架 ， 方 便 快速 构建 项 目 工程 。iView 的 官方 网 站 和 GitHub 地 址 如 下 。 

官方 网 站 : https:/www.iviewui.com/。 

GitHub: /— https://github.com/iview/1iview o 


图 12-1 展示 了 部 分 iView 组 件 的 截图 。 


Q 确定 删除 这 条 信息 吗 ? 


Delete 





12-1 iView 部 分 组 件 截图 
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从 左 往 右 ， 从 上 到 下 依次 为 : Slider 滑 块 、DatePicker 日 期 选择 器 、Select 选择 器 、Cascader 
级 联 选 择 器 、Poptip 气泡 提示 、Page 分 页 。 

iView 以 高 质量 、 细 致 漂亮 的 UI、 事 无 巨细 的 文档 等 特点 成 为 Vue.js 组 件 库 中 最 受 欢 迎 的 项 
日 之 一 。 本 章 就 来 剖析 iView 几 个 具有 代表 性 的 组 件 ， 重 点 是 理解 设计 一 个 通用 组 件 和 组 件 库 的 
的 思想 和 过 程 。 


12.1 级 联 选择 组 件 Cascader 


级 联 选 择 是 网 页 应 用 中 常见 的 表单 类 控件 ， 主 要 用 于 省 市 区 、 公 司 级 别 、 事 务 分 类 等 关联 数 
据 集 合 的 选择 。iView 的 级 联 选 择 组 件 如 图 12-2 所 示 。 


江苏 /苏州 / 拙 政 园 





12-2 iView 级 联 选 择 组 件 


Cascader 接收 一 个 prop: data 作为 选择 面板 的 数据 源 ， 使 用 v-model 可 以 双 回 绑 定 当前 选择 
的 项 。 比 如 图 12-2 的 示例 代码 如 下 : 


«template» 
«Cascader :data-"data" v-model-"value"»«/Cascader» 
«/template» 
«script» 
export default { 
data () { 
return { 
value: ['jiangsu', 'suzhou', 'zhuozhengyuan'], 
data: [{ 
value: 'beijing', 
label: ' 北 京 '， 
children: | 


{ 


), 


)] 
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value: 'gugong', 
label: ' 故 宫 ' 

}, 

{ 
value: 'tiantan', 
label: ' 天 坛 ' 

), 

{ 
value: 'wangfujing', 
label: ' 王 府 井 ， 


] 
{ 
value: 'jiangsu', 
label: ' 江 苏 '， 
children: [ 
{ 
value: 
label: 
children: | 


{ 


'nanjing', 
"BC, 


value: 'fuzimiao', 
label: 'XTJm' 
} 
] 
), 
{ 
value: 'suzhou', 
label: ' 苏 州 '， 


children: | 


{ 


value: 


label: 


value: 
label: 


'zhuozhengyuan', 


' jpg pe ' 


'shizilin', 


' 狮 子 林 ， 
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} 
} 


«/script» 


data 中 的 label 是 面板 显示 的 内 容 , value 是 它 对 应 的 值 , children 是 它 的 子 集 , 可 递归 。 v-model 
绑 定 一 个 数组 ， 每 一 项 对 应 data 里 的 value。 

Cascader 对 应 的 文档 地 址 为 https:/www.iviewui.com/components/cascader， 源 代码 地 址 为 
https://github.com/iview/iview/tree/2.0/src/components/cascader . 


iView 的 每 个 组 件 往往 依赖 其 他 的 组 件 ， 比 如 Cascader 依赖 Input. Drop. Icon 组 件 ， 
Q: 所 以 在 剖析 Cascader 时 ， 不 会 再 对 它 依 赖 的 组 件 进行 详细 介绍 ， 可 以 到 GitHub AX 
档 查看 依赖 组 件 的 相关 内 容 。 
本 章 是 基于 iView 的 2.0.0-rc.10 版 本 ， 未 来 有 可 能 会 更 新 此 组 件 ， 可 到 文档 查阅 更 新 
日 志 : https://www.iviewui.com/docs/guide/update . 
本 章 的 示例 代码 并 不 是 完整 的 ， 只 是 剖析 核心 的 功能 ， 分 析 设计 思路 ， 完 整 的 代码 请 
前 往 GitHub 查看 。 


Rb 
al 


开发 一 个 通用 组 件 最 重要 的 是 定义 APL, Vue 组 件 的 API KA 3 部 分 : prop. slot 和 event. 
API 决定 了 一 个 组 件 的 所 有 功能 ， 而 且 作 为 对 外 提供 的 组 件 ， 一 旦 API ME, WRAAE 
新 ， 用 户 的 代价 就 会 很 高 ， 因 为 他 们 已 经 在 业务 中 使 用 你 的 组 件 ， 改动 太 多 意味 着 所 有 用 到 的 地 方 
都 需要 改动 ， 所 以 组 件 库 更 新 分 兼容 更 新 和 不 兼容 更 新 ,不 是 迫不得已 ， 最 好 后 续 的 更 新 都 是 兼容 
性 的 ， 这 对 使 用 者 会 很 友好 。 

从 功能 上 考虑 ， 先 来 定义 Cascader 的 prop。 


data: 决定 了 级 联 面板 的 内 容 。 

value: 当前 选择 项 ， 可 使 用 v-model. 

disabled: 是 否 禁 用 。 

clearable: 是 否 可 清空 。 

placeholder: 占 位 提示 。 

size: 尺寸 (iView 多 数 表单 类 组 件 都 有 尺寸 ) 。 
trigger: 触发 方式 ( 点击 或 妇 标 滑 入 ) 。 
changeOnSelect: 选择 即 改变 。 

renderFormat: 自 定义 显示 内 容 。 


对 应 的 代码 如 下 : 


// cascader.vue 


«script» 
export default { 
props: { 
data: { 
type: Array, 
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default () { 


return []; 


), 

value: { 
type: Array, 
default () { 


return []; 


), 

disabled: { 
type: Boolean, 
default: false 

), 

clearable: { 
type: Boolean, 
default: true 

} ， 

placeholder: { 
type: String, 
default: ' 请 选择 ' 

ls 

size: [( 
validator (value) { 


return oneOf(value, ['small', 'large']);: 


- 

trigger: { 
validator (value) { 

return oneOf(value, ['click', 'hover']); 

); 
default: 'click' 

b, 

changeOnSelect: { 
type: Boolean, 
default: false 

), 

renderFormat: { 
type: Function, 
default (label) { 


return label.join(' / '); 
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}; 
</script> 


Cascader 的 核心 是 用 到 了 组 件 递归 ， 在 本 书 7.5.1 小 节 有 介绍 相关 用 法 。 使 用 组 件 递归 必 不 可 
少 的 两 个 条 件 是 有 name 选项 和 在 适当 的 时 候 结束 递归 。 图 12-2 中 所 示 的 级 联 选择 面板 每 一 列 都 是 
一 个 组 件 Caspanel (caspanelvue) , data 中 的 children. 决定 了 每 项 的 子 集 ， 也 就 是 需要 递归 显示 
Caspanel 的 数量 。 

看 一 下 Caspanel 的 相关 代码 : 


// caspanel.vue 
«template» 
«span» 
«ul v-if-"data && data.length" :class-"[prefixCls + '-menu'!']"-» 
«Casitem 
v-for-"item in data" 
: key="item" 
:prefix-cls-"prefixCls" 
:data-"item" 
:tmp-item-"tmpItem" 
Qclick.native.stop-"handleClickItem(item)" 
Qmouseenter.native.stop-"handleHoverItem(item)"»«/Casitem» 
«/ul»«Caspanel v-if-"sublist && sublist.length" 
:prefix-cls-"prefixCls" :data-"sublist" :disabled-"disabled" 
:trigger-"trigger" :change-on-select-"changeOnSelect"»«/Caspanel» 
«/span» 
«/template» 
«script» 


import Casitem from './casitem.vue'; 


export default { 
name: 'Caspanel', 
components: { Casitem ], 
props: { 
data: { 
type: Array, 
default () { 


return [l]; 


} ， 


disabled: Boolean, 
changeOnSelect: Boolean, 
trigger: String, 
prefixCls: String 
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), 
data () { 
return { 
tmpItem: {}, 
result: [], 
sublist: [] 


), 
watch: { 
data () ( 
this.sublist = []; 


}; 
</script> 


当 点 击 某 一 列 的 某 一 项 时 ,会 把 它 对 应 data 的 children 数据 赋 给 sublist，sublist 会 作为 下 一 个 
递归 的 Caspanel 的 data 使 用 ， 以 此 类 推 。 若 该 项 没有 children， 说 明 它 是 级 联 选择 的 最 后 一 项 ， 
则 点 击 直接 结束 选择 ， 同 时 约束 了 Caspanel 的 递归 。 

最 里 层 的 组 件 是 Casitem， 就 是 每 列 的 每 项 ， 它 的 作用 就 是 把 data 或 children 的 每 个 label 显 
示 出 来 。 

Cascader 的 基本 构成 就 是 上 述 的 3 部 分 : cascader.vue、caspanel.vue 和 casitem.vue. cascader.vue 
又 分 成 两 部 分 : 只 读 输 入 框 〈Input) M FAA (Drop) ， 在 下 拉 菜 单 中 使 用 第 一 个 Caspanel， 
开始 递归 每 一 列 。cascader.vue 的 template 代码 为 : 


// cascader.vue 
«template» 
«div :class-"classes" v-clickoutside-"handleClose"» 
«div :class-"[prefixCls + '-rel']" Qclick-"toggleOpen"» 
«slot» 
€«1i-input 
readonly 
:disabled-"disabled" 
v-model-"displayRender" 
fsize-"size" 
:placeholder-"placeholder"»«/i-input» 
«Icon 
type-"ios-close" :class-"[prefixCls + '-arrow']" 
v-show-"showCloseIcon" 
Qclick.native.stop-"clearSelect"»«/Icon» 
«Icon type-"arrow-down-b" :class-"[prefixCls + '-arrow']"» 
«/Icon» 


«/slot» 
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«/div» 
«transition name-"slide-up"» 


«Drop v-show-"visible"» 


«div» 
«Caspanel 
ref-"caspanel" 
:prefix-cls-"prefixCls" 
:data-"data" 
:disabled-"disabled" 
:change-on-select-"changeOnSelect" 
:trigger-"trigger"»«/Caspanel» 
«/div» 
«/Drop» 
«/transition» 
«/div» 
«/template» 
«script» 


import ilnput from '../input/input.vue'; 
import Drop from '../select/dropdown.vue'; 
import Icon from '../icon/icon.vue'; 


import Caspanel from './caspanel.vue'; 


import clickoutside from '../../directives/clickoutside'; 
// CSS 命名 空间 
const prefixCls - 'ivu-cascader'; 


export default { 
name: 'Cascader', 
components: { ilnput, Drop, Icon, Caspanel ], 
// 点 击 外 部 关闭 的 自 定 义 指 令 ， 详 见 8.2.1 
directives: { clickoutside ], 
props: 1 
// 省 略 
), 
data () { 
return { 
prefixCls: prefixCls, 
visible: false, 
selected: [], 
tmpSelected: [1], 
updatingValue: false, 
// 用 于 实现 v-model 


currentValue: this.value 
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} ， 
computed: { 
classes () { 
return [ 
"S(prefixCls)', 
{ 
['S(prefixCls])-show-clear' ]: this.showCloseIcon, 
['S(prefixCls]-visible' ]: this.visible, 
['S(prefixCls)-disabled' ]: this.disabled 


]; 
), 
showCloseIcon () { 
return this.currentValue && this.currentValue.length && 
this.clearable && !this.disabled; 
} ， 
// 自 定义 显示 内 容 
displayRender () { 
let label - []; 
for (let i = 0; i < this.selected.length; i++) { 
label.push(this.selected[i].label); 
} 


return this.renderFormat(label, this.selected); 


}; 
«/script» 


Input (i-input) 组 件 在 默认 的 slot 内 ， 这 意味 着 你 可 以 自 定 义 触 发 器 部 分 ， 不 局 限于 使 用 输入 
HE, 这 让 Cascader 使 用 更 灵活 。 使 用 slot 时 , 需要 自己 这 染 显示 的 内 容 , 所 以 提供 了 事件 on-change， 
在 选择 完成 时 触发 , 返回 value 和 selectedData, 分 别 为 已 选 值 和 已 选项 的 具体 数据 。 示例 代码 如 下 : 


«template» 
{{ text ]] 
«Cascader :data-"data" Qon-change-"handleChange"» 
«a href="javascript:void(0) "> 选择 </a> 
</Cascader> 
</template> 
«script» 
export default { 
data () { 


return { 


text: ' 未 选择 '， 
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}, 
methods: { 
handleChange (value, selectedData) { 


this.text = selectedData.map(o => o.label).join(', '); 


} 


«/script» 


Cascader 各 个 组 件 之 间 的 通信 关系 如 图 12-3 所 示 。 


Cascader 


.-27 
" 
^ 


T" AU < 
A Caspanel 
" L- -i 


,/ ` 
` 


4 
d 





12-3 Cascader 组 件 的 通信 关系 


我 们 已 经 多 次 介绍 过 , 在 Vue 2 里 , 组 件 间 通信 可 以 通过 $emit、bus、vuex 来 实现 。 但 是 iView 
作为 独立 组 件 ， 无 法 使 用 bus 和 vuex， 为 了 实现 路 组 件 通信 ，iView 模拟 了 Vue 1 的 dispatch 和 
broadcast 方法 。 代 码 如 下 : 


// src/mixins/emitter.js 
function broadcast (componentName, eventName, params) { 
this.$children.forEach(child => { 


const name = child.$options.name; 


if (name === componentName) { 

child.$emit.apply (child, [eventName].concat (params) ) ; 
} else { 

broadcast .apply (child, [componentName, 


eventName] .concat ([params])); 


第 12 章 iView 经 典 组 件 剖 析 245 


} ) 
} 
export default { 
methods: { 
dispatch(componentName, eventName, params) { 
let parent = this.$parent || this.S$root; 


let name = parent.S$options.name; 


while (parent && (!name || name !== componentName)) { 


parent = parent.$parent; 


if (parent) { 


name = parent.$options.name; 


} 
if (parent) { 


parent .$emit.apply (parent, [eventName].concat (params)); 


- 
broadcast (componentName, eventName, params) { 


broadcast.call (this, componentName, eventName, params); 


); 


emitterjs 使 用 递归 同上 或 癌 下 的 方式 查找 指定 的 组 件 名 称 (name) ， 找 到 后 触发 $emit 。 有 
了 emitter.js 就 可 以 自由 的 跨 组 件 通 信 了 。 图 12-3 中 ， 在 初始 化 时 (mounted) ，Cascader 需要 判 
断 是 否 已 经 设置 了 选中 值 ， 若 设置 了 ， 则 所 有 的 Caspanel 和 Casitem 更 新 选中 状态 。 这 个 过 程 是 在 
Cascader 使 用 broadcast 通知 Caspanel, 然后 递归 通知 附属 的 Caspanel。 同 理 , 当 从 父 组 件 修改 value 
时 ， 也 执行 检查 〈 即 updateSelected 方法 ) 。 在 点 击 Casitem 时 ， 使 用 dispatch 通知 Cascader 来 更 
新 在 输入 框 中 的 选中 值 ， 这 样 基本 就 形成 了 一 个 闭环 。 下 面 来 看 一 下 与 通信 相关 的 代码 : 


// cascader.vue 
«script» 
import Emitter from '../../mixins/emitter'; 
export default { 
mixins: [ Emitter ], 
methods: { 
updateSelected (init = false) { 
if (!this.changeOnSelect || init) { 
// 通知 Caspanel 更 新 当前 选中 值 
this.broadcast('Caspanel', 'on-find-selected', { 


value: this.currentValue 


Ii: 
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b, 
emitValue (val, oldVal) { 
if (JSON.stringify(val) !== oldVal) { 
// 暴露 接口 
this.$emit('on-change', this.currentValue, 


JSON.parse(JSON.stringify (this.selected))); 
} 


} ， 
mounted () { 
// 初始 化 时 更 新 选中 数据 
this.updateSelected (true); 
// 当 点 击 casitem 时 ， 会 派发 事件 到 这 里 
this.Son('on-result-change', (params) => { 
const lastValue = params.lastValue; 
const changeOnSelect = params.changeOnSelect; 


const fromInit - params.fromInit; 


if (lastValue || changeOnSelect) { 
const oldVal - JSON.stringify(this.currentValue); 
this.selected - this.tmpSelected; 


let newVal = []; 
this.selected.forEach((item) => { 
newVal.push(item.value); 


)); 


if (!frominit) { 
this.updatingValue - true; 
this.currentValue - newVal; 


this.emitValue(this.currentValue, oldVal); 


if (lastValue && !frominit) { 
this.handleClose(); 


)); 
), 
watch: { 
// 每 次 展开 下 拉面 板 时 都 更 新 一 次 选中 的 数据 
visible (val) { 
if (val) ( 


}; 
</script> 
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if (this.currentValue.length) { 
this.updateSelected(); 


} 
this.$emit('on-visible-change', val); 
), 
// v-model 的 基本 实现 方法 
value (val) { 
this.currentValue - val; 
if (!val.length) this.selected - []; 
), 
currentValue () { 
this.S$emit('input', this.currentValue); 
if (this.updatingValue) { 
this.updatingValue - false; 
return; 
} 
this.updateSelected (true); 
), 
// 如 果 数 据 源 变 了 ， 也 更 新 选中 的 数据 
data () ( 


this.S$nextTick(() => this.updateSelected()); 


// caspanel.vue 


«script» 


import Emitter from '../../mixins/emitter'; 


export default { 


mixins: [ Emitter ], 


methods: { 


// 点 击 选中 


handleClicklItem (item) { 


if (this.trigger !-- 'click' && item.children) return; 


this.handleTriggerItem(item); 
Ts 
// 鼠标 滑 过 选中 


handleHoverlItem (item) { 


if (this.trigger !-- 'hover' || !item.children) return; 


this.handleTriggerItem(item); 
}, 


247 


248 第 3 篇 ”实战 篇 


handleTriggerItem (item, fromInit = false) { 


if (item.disabled) return; 


// 向 上 递归 ， 设 置 临时 选中 值 〈 并 非 真 实 选 中 ) 
const backItem = this.getBaseItem(item); 
this.tmpItem = backItem; 

this.emitUpdate ([backItem]); 


// 通知 Cascader 更 新 选中 值 
if (item.children && item.children.length)( 
this.sublist = item.children; 
this.dispatch('Cascader', 'on-result-change', { 
lastValue: false, 
changeOnSelect: this.changeOnSelect, 
fromInit: fromInit 
)); 
} else { 
this.sublist = []; 
this.dispatch('Cascader', 'on-result-change', { 
lastValue: true, 
changeOnSelect: this.changeOnSelect, 


fromlInit: fromInit 


}); 


), 
updateResult (item) { 
this.result = [this.tmpItem].concat (item); 
this.emitUpdate (this.result); 
} ， 
getBaseltem (item) { 
let backItem = Object.assign((í), item); 
if (backlItem.children) { 
delete backlItem.children; 


return backItem; 
), 
emitUpdate (result) { 
if (this.$parent.$options.name === 'Caspanel') { 
this.$parent.updateResult (result); 
) else { 
this.S$parent.$parent.updateResult (result); 


第 12 章 iView 经 典 组 件 剖 析 249 


), 
mounted () { 
// 接收 来 自 Cascader 和 Caspanel 的 更 新 选中 值 事件 
this.$on('on-find-selected', (params) => { 
const val = params.value; 
let value = [...val]; 
for (let i = 0; i < value.length; i++) { 
for (let j = 0; j < this.data.length; j++) { 
if (value[i] === this.data[j].value) { 
this.handleTriggerItem(this.data[j], true); 
value.splice(0, 1); 
this.$nextTick(() => { 
// 继续 向 下 递归 更 新 选中 状态 
this.broadcast('Caspanel', 'on-find-selected', { 
value: value 
)); 
)); 


return false; 


}; 


</script> 

独立 组 件 与 业务 组 件 最 大 的 不 同 是 ， 业 务 组件 往 往 针 对 数据 的 获取 、 整 理 、 可 视 化 ， 逻 辑 清 
晰 简单 ， 可 以 使 用 vuex; 而 独立 组 件 的 复杂 度 更 多 集中 在 细节 、 交 互 、 性 能 优化 、API 设计 上 ， 
对 原生 JavaScript 有 一 定 考验 。 在 使 用 过 程 中 ， 可 能 会 有 新 功能 的 不 断 添 加 ， 也 会 发 现 隐藏 的 bug， 
所 以 独立 组 件 一 开始 迎 辑 和 代码 量 并 不 复杂 ， 多 次 迭代 后 会 越 来 越 风 长， 当然 功 能 也 更 丰富 ,使 用 
更 稳定 。 万 事 开 头 难 ， 组 件 API 的 设计 和 可 扩展 性 决定 了 组 件 迭 代 的 复杂 性 。 一 开始 不 可 能 考虑 
到 所 有 的 细节 ， 但 是 整体 架构 要 清晰 可 扩展 ， 人 否则 很 有 可 能 重 构 。 

iView 还 有 与 Cascader 类 似 思 路 的 组 件 一 一 树 形 控件 CTree) ， 同 样 有 着 巧妙 的 设计 ， 值 得 研 
究 ， 源 代码 地 址 : https://github.com/iview/iview/tree/2.0/src/components/tree. 


12.2” 折 又 面板 组 件 Collapse 


折 蕉 面板 也 是 网 站 常用 控件 ， 可 将 一 组 内 容 区 域 展 开 或 折 锥 ,使 页 面 干净 整洁 。iView jS 
面板 组 件 如 图 12-4 所 示 。 
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了 史 蒂 夫 .乔布斯 





史 蒂 夫 .乔布斯 (Steve Jobs) ，1955 年 2 月 24 日 生 于 美国 加 利 福 尼 亚 
州 旧 人 金山， 美国 发 明 家 、 企 业 家 、 美 国 苹果 公司 联合 创办 人 。 


RTEA uH IA EAE se 


P 乔纳森 ' 伊 夫 





12-4 iView 折 登 面板 Collapse 


相 比 上 一 节 的 Cascader，Collapse 组 件 无 论 从 UI 还 是 交互 上 都 要 简单 得 多 ， 基 于 已 有 的 知识 ， 
尔 完全 可 以 自行 开发 出 一 个 折 著 面板 组 件 来 。 通过 本 节 的 学 习 后 , 可 以 进一步 了 解 组 件 开发 中 的 一 

些 细节 和 设计 。 在 学 习 本 节 内 容 前 ， 不 妨 先 独立 开发 一 个 Collapse， 然 后 与 iView 的 Collapse 进行 
对 比 。 

Collapse 对 应 的 文档 地 址 为 https://www.iviewui.com/components/collapse, ， 源 代码 地 址 为 
https://github.com/iview/1view/tree/2.0/src/components/collapse . 

Collapse 组 件 分 为 两 部 分 :collapse.vue 和 panel.vue, collapse 作为 组 件 容器 ,接收 一 个 整体 的 slot, 
而 slot 就 由 panel 组 成 ， 并 且 可 以 进行 折 有 登 面板 的 嵌 套 。collapse 支持 v-model 来 双 癌 绑 定 当前 激活 
的 面板 ， 判 断 激活 的 依据 是 panel 的 prop: name， 所 以 Collapse 组 件 的 基本 结构 和 props 如 下 : 


// collapse.vue 
<template> 
«div :class-"classes"» 
«slot»«/slot» 
«/div» 
«/template» 
«script» 
// CSS 的 命名 空间 


const prefixCls - 'ivu-collapse'; 


export default { 
name: 'Collapse', 
props: { 
/ /是否 为 手风琴 模式 ， 该 模式 下 同时 只 能 展开 一 个 面板 
accordion: { 
type: Boolean, 
default: false 
), 
// 对 应 panel .vue 展开 的 name， 手 风琴 模式 下 为 数组 


value: { 
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type: [Array, String] 


), 
data () { 
return { 


// 设置 内 部 使 用 状态 ， 用 于 实现 v-model 


currentValue: this.value 


}， 
computed: { 
classes () { 


return '$(prefixCls]' >; 


); 
watch: { 
value (val) { 


// 从 外 部 改变 value 时 ， 更 新 内 部 的 数据 


this.currentValue - val; 


}; 


«/script» 


// panel.vue 
«template» 
«div :class-"itemClasses"» 
«div :class-"headerClasses"» 
«Icon type-"arrow-right-b"»«/Icon» 
«slot»«/slot» 
«/div» 
«div :class-"contentClasses"» 
«div :class-"boxClasses"-» 
«slot name-"content"»«/slot» 
«/div» 
«/div» 
«/div» 
«/template» 
«script» 
// 依赖 iview 的 图 标 组件 ， 这 里 使 用 小 箭头 
import Icon from '../icon/icon.vue'; 
// CSS 的 命名 空间 


const prefixCls = 'ivu-collapse'; 
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export default { 
name: 'Panel', 
components: { Icon ], 
props: { 
name: { 


// 用 于 唯一 识别 当前 面板 
type: String 


}; 
«/script» 


Panel 有 两 个 slot， 默 认为 面板 头 部 的 内 容 ， 也 就 是 标题 ， 名 为 content 的 slot 为 主体 内 容 。 

如 果 没 有 指定 name (有 些 场 景 不 关心 是 哪个 面板 ， 只 是 需要 折 闭 面板 这 个 功能 ) ，Collapse 
就 会 在 初始 化 时 人 遍历 Panel 组 件 ， 动 态 地 设置 一 个 index。Collapse 会 优先 识别 name， 在 没有 定义 
时 才 使 用 自动 设置 的 index. slot: content 只 在 当前 面板 激活 时 显示 ， 所 以 还 需要 增加 一 个 数据 
isActive 来 控制 显示 与 否 ， 并 通过 点 击 默认 的 slot 来 切换 。 这 部 分 代码 如 下 : 


// panel .vue， 部 分 代码 省 略 
<template> 
<div :class="itemClasses"> 
«div :class-"headerClasses" Qclick="toggle"> 
«Icon type-"arrow-right-b"»«/Icon» 
«slot»«/slot» 
«/div» 
«div :class-"contentClasses" v-show-"isActive"» 
«div :class-"boxClasses"» 
«slot name-"content"»«/slot» 
«/div» 
«/div» 
«/div» 
«/template» 
«script» 
export default { 
data () { 
return { 
index: 0, 
isActive: false 
}; 
} ， 
methods: { 
toggle () { 
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// 访问 父 链 ( 即 collapse.vue) 执行 方法 ， 稍 后 介绍 
this.$parent.toggle(í( 
// 优先 使 用 name， 未 定义 时 使 用 index 
// index 和 isActive 都 在 collapse .vue 中 设置 ， 稍 后 介绍 
name: this.name || this.index, 
isActive: this.isActive 


)):; 


), 
// 动态 设置 相关 css 类 名 
computed: { 
itemClasses () { 
return [ 
"$(prefixCls])-item', 
{ 


['S(prefixCls]-item-active ]: this.isActive 


1; 
), 
headerClasses () { 

return ^$[prefixCls]-header'; 
l; 
contentClasses () { 

return `${prefixCls}-content`; 
), 
boxClasses () { 


return '$(prefixCls]-content-box'; 


F> 


«/script» 


以 上 是 所 有 Panel 组 件 的 代码 。 接 下 来 在 collapsevue 初始 化 时 ， 通 过 访问 子 链 〈 即 遍历 所 有 
的 panel.vue) 来 给 panel 动态 设置 index 和 isActive。Collapse 中 有 两 个 方法 : getActiveKey 和 
setActive， 前 者 用 于 将 当前 激活 面板 的 受 控 数据 currentValue 根据 是 否 为 手风琴 状态 做 处 理 ， 使 两 
种 模式 下 的 数据 格式 统一 。setActive 是 遍历 Panel， 并 设置 其 index 和 isActive。 相 关 代 码 如 下 : 


// collapse.vue， 部 分 代码 省 略 
export default { 
methods: ( 
getActiveKey () ( 
let activeKey = this.currentValue || []; 


const accordion - this.accordion; 


254 


第 3 篇 ”实战 篇 


/* 
* value 的 类 型 可 以 是 字符 串 或 数组 ， 
* 为 保证 数据 格式 统一 , 将 activeKey 强行 设置 为 数组 因为 不 能 保证 用 户 设 置 的 都 是 数组 
xy 
if (lArray.isArray(activeKey)) { 
activeKey = [activeKey]; 
} 
// 手风琴 模式 下 ， 如 果 多 设置 了 数组 ， 也 只 取 其 第 一 项 
if (accordion && activeKey.length > 1) { 
activeKey = [activeKey[0]]; 
} 
// 将 activeKey 转 为 字符 串 ， 因 为 用 户 设置 的 有 可 能 是 字符 串 数字 ， 比 较 时 类 型 会 不 


for (let i = 0; i < activeKey.length; i++) { 
activeKey[i] = activeKey[i].toString(); 


} 


return activeKey; 
), 
setActive () { 
const activeKey = this.getActiveKey(); 
this.$children.forEach((child, index) => { 
const name = child.name || index.toString(); 
let isActive = false; 


// 在 两 种 模式 下 ， 判 断 当 前 Panel 是 否 需要 激活 


if (self.accordion) { 


isActive = activeKey === name; 
) else { 
isActive = activeKey.indexOf (name) > -1; 


} 
// 给 当前 Panel 设置 isActive 和 index, index 为 它 在 slot 中 的 序列 
child.isActive = isActive; 


child.index = index; 


), 

mounted () { 
// 初始 化 时 ， 设 置 isActive 和 index 
this.setActive (); 

}, 

watch: { 
value (val) { 


this.currentValue - val; 


} ， 
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//4A£ X currentValue 时 ， 重 新 设置 一 遍 状 态 
currentValue () { 


this.setActive(); 


}; 


最 后 还 剩余 在 Panel 中 遗留 的 一 个 toggle 方法 ， 当 切换 面板 的 激活 与 隐藏 状态 时 ， 需 要 更 新 
currentValue， 并 发 出 自 定义 事件 input 和 on-change， 其 中 input 是 为 了 实现 v-model 语法 糖 ， 代 码 
如 下 : 


// collapse.vue， 部 分 代码 省 略 
export default { 
methods: { 
/* 
* data Hi Panel 传递 ， 有 两 项 : 
* name， 当 前 Panel 的 name 或 index 的 值 
* isActive， 当 前 是 否 激活 
人 
toggle (data) { 
const name = data.name.toString(); 
// 声明 一 个 临时 激活 项 列表 
let newActiveKey = []; 
if (this.accordion) 1 
/* 
* 手风琴 模式 下 ， 同 时 只 能 激活 一 个 面板 
* 如 果 当 前 未 激活 ， 就 将 它 的 name 写 入 临时 列表 
* 如 果 已 激活 ， 意 味 着 关闭 所 有 的 面板 ， 所 以 不 用 任何 设置 
sf 
if (!data.isActive) { 
newActiveKey.push (name); 
} 
) eise { 
let activeKey = this.getActiveKey(); 
const nameIndex = activeKey.indexOf (name); 
// 点 击 后 切换 为 关闭 
if (data.isActive) { 
if (namelndex > -1) { 
activeKey.splice(nameIndex, 1); 
} 
// 点 击 后 切换 为 展开 
) else { 


if (namelndex < 0) { 
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activeKey.push (name); 


} 


newActiveKey = activeKey; 


) 
// 更 新 currentValue 会 触发 watch， 从 而 调用 setactive 方法 


this.currentValue - newActiveKey; 
this.S$emit('input', newActiveKey); 


this.$emit('on-change', newActiveKey); 


} 
以 上 就 是 Collapse 组 件 所 有 的 代码 ， 下 面 为 图 12-4 对 应 的 代码 : 
«template» 


«Collapse v-model-"value"» 


«Panel name-"]"» 


史 蒂 夫 :乔布斯 
«p slot="content"> 史 带 夫 -乔布斯 (Steve Jobs) ...«/p» 
«/Panel» 


«Panel name-z"2"» 


斯 带 夫 . nu - X24 Je ME và 
«p slot-"content"»JUpAoS X - sisi -RAEE (Stephen Gary Wozniak) ...«/p» 


«/Panel» 


«Panel name-"3"» 


FAR- BU 
«p slot="content"> 乔 纳 森 - 伊 夫 ....</p> 
</Panel> 
</Collapse> 
</template> 


<script> 
export default { 
data () { 
return { 


value: '1]' 


} 
«/script» 


在 Panel FRJ UBER Collapse, "iE 12-5 所 示 。 
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v 史 蒂 夫 .乔布斯 


史 蒂 夫 .乔布斯 (Steve Jobs) ，1955 年 2 月 24 日 生 于 美国 加 利 福 尼 亚 州 旧金山 ， 美 国 发 
明 家 、 企 业 家 、 美 国 苹果 公司 联合 创办 人 。 


iPhone 


iPhone， 是 美国 苹果 公司 研发 的 智能 手机 ， 它 搭载 :OS 操作 系统 。 第 一 代 iPhone 于 
2007 年 1 月 9 日 由 苹果 公司 前 首席 执行 官 史 蒂 夫 .乔布斯 发 布 ， 并 在 2007 年 6 月 29 日 


正式 发 售 。 


> iPad 


b 斯 蒂 夫 - 盖 瑞 : 沃 兹 尼 亚 克 


b 乔纳森 : 伊 夫 





12-5 Collapse I] E RE: 


iView 的 40 多 个 组 件 都 是 独立 的 UI 组 件 ， 它 无 法 像 业 务 组 件 那 样 使 用 Vuex. bus 等 技术 进行 
跨 组 件 通 信 ， 因 此 会 经 党 访问 和 操作 父子) 链 来 修改 状态 及 调用 方法 。 但 是 在 业务 开发 中 ， 要 尽 
量 避 免 这 样 的 操作 ， 因 为 很 难 知 道 是 谁 修改 了 组 件 的 状态 ， 正 确 的 做 法 应 该 是 使 用 Vuex 或 bus 来 
统一 维护 。 


12.3 iView [^4 & TL R R2 


iView 项 目 中 还 有 很 多 实用 的 工具 函数 ， 在 https://github.com/iview/iview/blob/2.0/src/utils/ 
assist.js 文件 中 ,比如 findComponentUpward、 findComponentDownward 和 findComponentsDownward 
方法 ， 它 们 用 来 同上 或 癌 下 寻找 指定 name 的 组 件 ， 有 些 场 景 下 会 比 上 一 节 介 绍 的 broadcast 和 
dispatch 方法 好 用 ， 因 为 这 3 个 方法 直接 返回 的 是 组 件 实例 ， 而 不 是 传递 数据 。 

findComponentUpward 方法 以 当前 实例 为 参照 点 ， 向 上 寻找 出 指定 name 或 几 个 name 中 的 一 
个 组 件 实例 ， 找 到 后 立即 返回 该 实例 。 函 数 代 码 如 下 : 


function findComponentUpward (context, componentName, componentNames) { 


if (typeof componentName === 'string') { 
componentNames = [componentName]; 
} else { 


componentNames = componentName; 


let parent = context. $parent; 
let name = parent.$options.name; 


while (parent && (!name || componentNames.indexOf (name) < 0)) { 
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parent = parent.S$parent; 

if (parent) name = parent.S$options.name; 
} 
return parent; 


} 


第 一 个 参数 context 是 上 下 文 ， 即 以 哪个 组 件 开始 向 上 寻找 ， 一 般 都 传递 this， 也 就 是 当前 的 
实例 。componentName 和 componentNames 只 需要 传递 一 个 即 可 ， 前 者 是 字符 串 ， 后 者 是 数组 ， 
函数 开始 会 判断 传递 的 类 型 ， 如 果 是 字符 串 ， 就 把 它 转 为 一 个 数组 来 使 用 ， 保 证 格式 统一 。 

使 用 while 语句 一 层 层 向 上 级 循环 ， 直 到 找 出 指定 的 组 件 为 止 ， 寻 找 的 依据 是 组 件 的 name F 
段 ， 所 以 在 写 组 件 时 必须 设置 name，iView 所 有 的 组 件 也 都 有 name 字段 。 

findComponentDownward 和 findComponentsDownward 方法 与 fndComponentUpward 类 似 , 不 
同 的 是 向 下 寻找 指定 的 组 件 ， 但 findComponentsDownward 会 找到 所 有 匹配 的 子 组 件 ， 而 
findComponentDownward 只 会 找到 第 一 个 匹配 的 。 以 下 是 两 个 函数 的 代码 : 


// Find component downward 
function findComponentDownward (context, componentName) { 
const childrens = context.$children; 
let children - null; 
if (childrens.length) { 
childrens.forEach(child => ( 
const name = child.S$options.name; 
if (name === componentName) { 
children = child; 


)); 
for (let i = 0; i < childrens.length; i++) { 
const child = childrens[i]; 


const name = child.$options.name; 


if (name === componentName) { 
children = child; 
break; 

} else { 


children = findComponentDownward(child, componentName); 
if (children) break; 


} 


return children; 


} 


// Find components downward 
function findComponentsDownward (context, componentName, components = []) { 


const childrens = context.S$children; 
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if (childrens.length) { 
childrens.forEach(child => { 
const name = child.$options.name; 
const childs = child.$children; 
if (name === componentName) components .push (child); 
if (childs.length) { 
const findChilds - findComponentsDownward (child, componentName, 


components); 


if (findChilds) components.concat(findChilds); 


}); 
} 


return components; 


} 


iView 在 Radio、Checkbox、Menu 等 很 多 组 件 中 都 使 用 了 这 3 个 方法 。 如 果 你 已 经 使 用 了 iView 
项 目 ， 那 么 assistjs 里 所 有 的 方法 都 可 以 使 用 。 以 这 3 个 方法 为 例 ， 在 业务 中 可 以 这 样 导 入 : 


import { 
findComponentUpward, 
findComponentDownward, 
findComponentsDownward 


) from 'iview/src/utils/assist'; 


除了 工具 函数 外 ，iView 内 置 的 自 定 义 指 令 、 混 合 也 可 以 直接 使 用 。 自 定义 指令 所 在 地 址 为 
https://github.com/iview/iview/tree/2.0/src/directives, Jt" clickoutside.js 已 经 在 第 8 章 中 有 所 介绍 ， 
是 用 来 点 击 外 部 关闭 弹 窗 用 的 。transfer-dom.js 用 于 将 当前 dom 插入 body 内 , iView 的 Modal 组 件 
中 使 用 过 ， 模 态 框 (Modal) 弹出 时 ， 会 覆盖 整个 屏幕 ， 如 图 12-6 所 示 。 


局 iviewui.com 


普通 的 Modal 对 话 框 标题 


对 话 框 内 容 
对 话 框 内 容 
对 话 框 内 容 





12-6 iView 的 Modal 组 件 
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如 果 <Modal></Modal> 所 在 的 DOM 使 用 了 CSS 定位 ,那么 Modal 的 fixed 定位 参照 会 不 准确 ， 
因为 它 相 对 的 是 当前 实例 所 在 的 DOM， 使 用 transfer-dom 指令 后 ，Modal 会 被 移动 到 body 内 ， 也 
就 是 相对 整个 body 使 用 fixed 定位 ， 这 样 避免 了 遮 尝 不 完全 的 情况 。 

iView 同时 也 是 一 整套 的 前 端 解决 方案 ， 包含 工 程 构建 、 主 题 定制 、 多 语言 等 功能 ， 极 大 地 提 
升 了 开发 效率 。 如 果 你 的 项 目 是 面向 中 后 台 业 务 的， 不 妨 试 试 这 套 UI 框架 ， 相 信和 至 少 会 提高 一 倍 
的 开发 效率 。 
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知 乎 日 报 是 由 知 乎 开发 的 一 款 资 讯 类 阅读 App， 每 日 提供 来 自 知 乎 社区 精 选 的 问答 或 专栏 文 
章 。 本 章 将 使 用 Vue 和 webpack 等 相关 技术 ， 利 用 知 乎 日 报 的 接口 开发 一 个 Web App- 


13.1 分 析 与 准备 


本 章 将 以 第 10 章 的 webpack 配置 为 基础 进行 开发 ， 可 以 先 到 GitHub 下 载 工程 配置 文件 : 
https://github.com/icarusion/vue-book/tree/master/demo ， 将 项 目 保存 到 新 建 的 daily 目录， 然后 完成 
依赖 安装 。 本 章 所 有 的 代码 也 上 传 至 GitHub， 访 问 链 接 可 以 查看 并 直接 使 用 : 
https://github.com/icarusion/vue-book/tree/master/daily . 

日 报 是 一 个 单 页 的 应 用 ， 由 3 部 分 组 成 ， 如 图 13-1 所 示 。 

左 侧 是 菜单 ， 分 为 “每 日 推荐 ”和 “主题 日 报 ” 两 个 类 型 ， 中 间 是 文章 列表 ， 右 侧 是 文章 正 
文 和 评论 。 其 中 每 日 推荐 按 日 期 排列 , 比如 图 中 显示 为 5 月 2 日 的 推荐 文章 , 中 间 栏 滚动 至 底部 时 ， 
自动 加 载 前 一 天 的 推荐 内 容 。 

主题 日 报 有 “日 常 心 理学 ”等 10 多 个 子 分 类 ， 分 类 列表 默认 是 收 起 的 ， 上 点击“ 主题 日 报 ” 沫 
单 时 切换 展开 和 收 起 的 状态 。 点 击 某 个 子 分 类 后 ， 中 间 栏 切换 为 该 类 目下 的 文章 列表 ， 不 再 按时 间 
排列 。 点 击 文章 列表 中 的 某 一 项 ， 在 右 侧 泻 染 对 应 文章 的 内 容 和 评论 。 

知 乎 日 报 的 接口 地 址 前 级 为 http:/news-at.zhihu.com/api/4/ ， 图 片 地 址 前 级 为 
https:/picl1.zhimg.com， 由 于 两 者 都 开局 了 路 域 限制 ， 无 法 在 前 端 直 接 调用 ， 因 此 要 开发 一 个 代理 。 
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每 日 推荐 


| 000 DAGESER UST: 1 这 话 听 着 就 像 
Peu E> CASONA E 。 谣言 ， 不 过 洗涤 剂 真 的 有 害 吗 ? 


日 常 心理 学 二。 洗涤 剂 真 的 有 害 吗 * 


iim" 医学 谣言 探 案 集 之 「 石 化 清洁 剂 是 人 类 
致命 的 杀手 ? ] 


eee em ”有 限 责 任 公司 的 责任 到 
"o XES [有 限 1 ; 


> r 与 每 一 个 关注 我 的 知 友 分 享 高 质 其 的 信息 


| 说 洗涤 剂 之 前 ， 我 们 先 介绍 另外 一 种 化 合 物 : 短 时 间 内 大 量 
[ 古 莫 就 那么 多 ， 控 完 摄 入 该 物质 可 以 引起 头痛 、 恶 心 、 哎 吐 、 抽 搞 和 展 迷 ， 而 少 
IEAJ? |] 最 该 物质 进入 呼吸 道 也 会 导致 室 息 死亡 ， 构 成 它 的 化 学 元 素 
在 单 体 状态 下 都 高 度 易 燃 ， 它 还 是 多 种 强 腐蚀 性 溶液 的 主要 
成 分 ， 如果 在 实验 室 中 将 这 种 化 合 物 与 培养 的 细胞 放 在 一 
起 ,很 快 就 会 导致 细胞 脱 胀 、 破 裂 
开始 游戏 ET 30 年 ， 那 本 能 教 你 


认识 每 一 种 rz. 的 书 听 上 去 很 危险 是 吧 ， 实 际 上 这 种 化 合 物 是 一 一 水 。 当 然 ， 用 
音乐 日 报 终于 更 新 了 水 作为 例子 不 能 直接 证 明 洗 涤 剂 是 有 毒 或 是 无 毒 ， 但 至 少 可 
以 说 明 一 个 道理 : 讨论 某 种 物质 的 安全 性 ， 不 应 以 其 在 超 剂 
动漫 日 报 R. 非常 规 使 用 方式 下 会 造成 的 危害 作为 依据 ， 而 要 从 实际 
体育 日 报 - 猪 哪 个 部 位 ;的 肉 吉 使 用 场景 出 发 、 结合 EEE 锋 中 起 到 的 正 面 作用 综合 权衡 利 
Esci 8K. AFREEN UC OH PI FI R ERER E 

Lt? -BET dp 响 





13-1 日 报应 用 效果 图 


跨 域 限制 是 服务 端的 一 个 行为 ， 当 开启 对 某 些 域名 的 访问 限制 后 ， 只 有 同 域 或 指定 域 
p 页 面 可 以 调用 ， 这 样 相对 来 说 更 安全 ， 图 片 也 可 以 防盗 链 。 跨 域 限 制 一 般 只 在 浏 

ign 览 器 端 存在 ， 对 于 服务 端 或 iD0S、Android 等 客户 端 是 不 存在 的 。 使 用 代理 是 开发 过 程 
中 常见 的 一 种 解决 方案 。 


我 们 使 用 基于 Node.js 的 request 库 来 做 代理 ， 通 过 NPM 安装 request: 


npm install request --save-dev 


在 daily 目录 下 新 建 一 个 proxy. js 的 文件 ， 写 入 以 下 内 容 (如 果 你 不 太 了 解 Node.js， 可 以 先 直 
接 使 用 ) : 


const http = require('http'); 


const request = require('request'); 


const hostname = '127.0.0.1'; 
const port - 8010; 
const imgPort - 8011; 


// 创建 一 个 API 代理 服务 


const apiServer = http.createServer((req, res) => { 


const url = 'http://news-at.zhihu.com/api/4' + req.url; 
const options = { 
url: url 
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function callback (error, response, body) { 
if (lerror && response.statusCode === 200) { 

// 设置 编码 类 型 ， 否 则 中 文 会 显示 为 乱码 
res.setHeader('Content-Type', 'text/plain;charset-UTF-8'); 
// 设置 所 有 域 允许 跨 域 
res.setHeader('Access-Control-Allow-Origin', '*'); 
// 返 回 代理 后 的 内 容 
res.end (body); 


} 
request.get(options, callback); 
)); 
// 监听 8010 端口 
apiServer.listen(port, hostname, () => { 
console.log (接口 代理 运行 在 http://${hostname}:${port}/`); 
)); 
// 创建 一 个 图 片 代理 服务 
const imgServer = http.createServer((req, res) => { 
const url - req.url.split('/img/')[1]; 
const options = { 
uri: url. 
encoding: null 


}; 


function callback (error, response, body) { 
if (!error && response.statusCode === 200) { 
const contentType = response.headers['content-type'!']; 
res.setHeader('Content-Type', contentType); 
res.setHeader('Access-Control-Allow-Origin', '*'); 


res.end (body); 


) 


request.get (options, callback); 
)); 
// 监听 8011 端口 


imgServer.listen(imgPort, hostname, () => { 
console.log (` 图片 代理 运行 在 http://${hostname}:${imgPort}/`); 
}); 


监听 了 两 个 端口 : 8010 和 8011. 8010 用 于 接口 代理 ，8011 用 于 图 片 代理 。 比 如 请 求 的 真实 
接口 为 http://news-at.zhihu.com/api/4/news/3892357， 开 发 时 改写 为 http://127.0.0.1:8010/news/ 
3892357; 图 片 的 真实 地 址 为 https:/pic4.zhimg.com/v2-b44636ccd2affac97ccc0759a0f46f7f jpg, FE 
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时 改写 为 http://127.0.0.1:8011/img/https://pic4.zhimg.com/v2-b44636ccd2affac97ccc0759a0f46f7f.jpg。 
代理 的 核心 是 在 返回 的 头 部 (response header) 中 添加 一 项 Access-Control-Allow-Origin 为 “*”， 
也 就 是 允许 所 有 的 域 访 问 。 
最 后 在 终端 使 用 Node 启动 代理 服务 : 


node proxy.js 


如 果 成 功 ， 就 会 在 终端 显示 两 行 日 志 : 


接口 代理 运行 在 http://127.0.0.1:8010/ 
图 片 代理 运行 在 http://127.0.0.1:8011/ 


对 于 接口 的 Ajax 请 求 ， 前 端 有 很 多 实现 方案 ， 比 如 jQuery 的 $.ajax, 但 是 只 为 使 用 Ajax 而 引 
入 一 个 jQuery 显然 不 太 友 好 。 如 果 你 完成 了 11.3 章节 的 练习 题 ， 可 以 用 做 好 的 Vue 插件 通过 
this.$ajax 直接 请 求 。Vue 官方 也 提供 了 vue-resource 插件 ， 但 是 不 再 维护 ， 而 是 推荐 使 用 axios， 
所 以 本 章 示 例 也 基于 axios 来 做 异步 请 求 。 

axios 是 基于 Promise 的 HTTP 库 ， 同 时 支持 前 端 和 Node.js。 首 先 用 NPM 安装 axios: 


npm install axios --save 


在 daily 目录 下 新 建 目 录 libs, 并 在 libs 下 新 建 utiljs 文件 , 项 目 中 使 用 的 工具 函数 可 以 在 这 里 
封装 。 比 如 对 axios 封装 ， 写 入 请 求 地 址 的 前 级 ， 在 业务 中 只 用 写 相 对 路 径 ， 这 样 可 以 灵活 控制 。 
另外 ， 可 以 全 局 拦截 axios 返回 的 内 容 ， 简 单 处 理 ， 只 需 返 回 我 们 需要 的 数据 。 其 代码 如 下 : 


// util.js 

import axios from 'axios'; 

// 基本 配置 

const Util = { 
imgPath: 'http://127.0.0.1:8011/img/', 
apiPath: 'http://127.0.0.1:8010/' 

}; 

// Ajax 通用 配置 

Util.ajax = axios.create(í 
baseURL: Util.apiPath 

Is 

// 添 加 响应 拦截 器 

Util.ajax.interceptors.response.use(res => { 
return res.data; 


)); 


export default Util; 


更 多 关于 axios 的 使 用 可 以 查阅 官方 文档 : https;//github.com/mzabriskie/axios . 
做 好 这 些 准 备 后 ， 就 可 以 开始 日 报应 用 的 开发 了 。 
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13.2 ”推荐 列表 与 分 类 


13.2.1 搭建 基本 结构 
项 目 中 使 用 的 CSS 样式 不 多 ， 所 以 直接 写 在 daily/style.css， 并 在 mainjs 中 导入 : 


// main.js 
import Vue from 'vue'; 
import App from './app.vue'; 


import './style.css'; 


new Vue(( 
el: '#app', 
render: h => ( 
return h (App) 


}); 
日 报 是 单 页 应 用 ， 没 有 路 由 ， 只 有 一 个 入 口 组 件 app.vue。 应 用 结构 如 图 13-2 所 示 。 


.daily-menu .daily—list <daily-article> 


<ltem> .daily-article-content 


.daily-comments 





13-2 日 报应 用 结构 


应 用 分 左 、 中 、 右 3 栏 , 3 栏 都 可 以 滚动 。 对 左 栏 和 中 栏 使 用 fixed 固定 ， 并 使 用 overflow: auto 
滚动 ， 而 右 栏 高 度 自 适应 ， 使 用 浏览 器 默认 的 body 区 域 滚 动 即 可 。 基 本 的 HTML 和 CSS 结构 
如 下 : 
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// app.vue 


«template» 


«div class-"daily"» 
«div class-"daily-menu"» 
«div class-"daily-menu-item"» 4i HfE2£«/aiv» 
«div class-"daily-menu-item"» ji HjR«/div» 
«/div» 
«div class-"daily-list"-» 
«Item»«/Item» 
«/div» 
«daily-article»«/daily-article» 
«/div» 


«/template» 


// style.css 
html, bodyí 


} 


margin: 0; 
padding: 0; 
height: 100$; 
color: #657180; 


font-size: 16px; 


.-daily-menu(í 


} 


width: 150px; 
position: fixed; 
top: 0; 

bottom: 0; 

teftes d 

overflow: auto; 
background: $f5f7f9; 


-daily-menu-item( 


} 


font-size: 18px; 

text-align: center; 

margin: 5px 0; 

padding: 10px 0; 

cursor: pointer; 

border-right: 2px solid transparent; 


transition: all .3s ease-in-out; 


.-daily-menu-item:hover( 


background: 1e3e8ee; 
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-daily-menu-item.on( 


border-right: 2px solid 4$3399ff; 


.daily-list(í( 

width: 300px; 

position: fixed; 

top: 0; 

bottom: 0; 

left: 150px; 

overflow: auto; 

border-right: lpx solid $d7dde4; 
} 
.daily-item( 

display: block; 

color: inherit; 

text-decoration: none; 

padding: 16px; 

overflow: hidden; 

cursor: pointer; 

transition: all .3s ease-in-out; 
} 
.daily-item:hoverí 

background: 1e3e8ee; 


) 


.-daily-article[( 
margin-left: 450px; 
padding: 20px; 

} 


13.2.2 ”主题 日 报 


“主题 日 报 ” 下 有 子 类 列表 ， 默 认 是 收 起 的 ， 点 击 主题 日 报 可 以 切换 展开 和 收 起 的 状态 ， 使 
用 数据 showThemes 来 控制 ， 并 用 themes 来 循环 演 染 子 类 目 : 


// app.vue， 部 分 代码 省 略 
«template» 
«div class-"daily-menu"» 
«div class-"daily-menu-item" 
:class-"( on: type === 'recommend' }"> 每 日 推荐 </div> 
«div class-"daily-menu-item" 
:class-"( on: type === 'daily' Jj" 
Qclick-"showThemes = !showThemes"> 主 题 日 报 </div> 


«ul v-show="showThemes"> 
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«li v-for-"item in themes"> 
«a :class-"( on: item.id === themeId && type === 
'daily' }">{{ item.name }}</a> 
«/li» 
«/ul» 
«/div» 
«/template» 
«script» 
export default { 
data () { 
return { 
themes: [], 
showThemes: false, 
type: 'recommend', 
themeId: 0 


b, 

} 

«/script» 

// style.css 

.daily-menu ult{ 
list-style: none; 

} 

.daily-menu ul li at 
display: block; 
color: inherit; 
text-decoration: none; 
padding: 5px 0; 
margin: 5px 0; 
cursor: pointer; 

} 

.daily-menu ul li a:hover, .daily-menu ul li a.ont 


color: 43399ff; 
] 


themeld 会 在 点 击 子 类 时 设置 ， 稍 后 会 介绍 。 
应 用 初始 化 时 ， 获 取 主 题 日 报 的 分 类 列表 : 


// app.vue， 部 分 代码 省 略 
<script> 
import $ from './libs/util'; 
export default { 
data () { 
return { 


themes: [] 
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} ， 
methods: { 
getThemes () { 
// axios 发 起 get 请 求 
$.ajax.get('themes').then(res => { 
this.themes = res.others; 


)) 


), 


mounted () { 
// 初始 化 时 调用 
this.getThemes(); 


} 


«Jscripts 
主题 日 报 类 目 列表 为 数组 ， 每 一 项 的 结构 示例 如 下 : 


"others": [ 
{ 
"name": "日 常 心理 学 "， 
“ad E E3; 
"thumbnail": "http://pic3.zhimg.com/xxx.jpg", 
"color": 1500], 
"description": "了 解 自己 和 别人 人， 了解 彼此 的 欲望 和 局 限 。" 


] 

点 击 子 类 目 时 ， 将 沫 单 type 切换 为 “主题 日 报 ” 高 亮点 击 的 子 类 ， 然 后 加 载 该 类 目下 的 文章 
列表 : 

// app.vue， 部 分 代码 省 略 


«template» 
«ul v-show-"showThemes"» 


«li v-for-"item in themes"» 


«a 
:class-"( on: item.id === themeld && type === 'daily' }" 
Qclick-"handleToTheme (item.id)"»((| item.name }}</a> 
</li> 
</ul> 
</template> 
<script> 


import $ from './libs/util'; 
export default { 
data () { 
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return { 
themes: [], 
showThemes: false, 
type: 'recommend', 
Iiistt LIS 
themeId: 0 


}， 
methods: { 
handleToTheme (id) { 
// 改变 菜单 分 类 
this.type = 'daily'; 
// 设置 当前 点 击 子 类 的 主题 日 报 ia 
this.themeId = id; 
// 清空 中 间 栏 的 数据 
this.list = [];: 
$.ajax.get('theme/' + id).then(res => { 
// 过 滤 掉 类 型 为 1 的 文章 ， 该 类 型 下 的 文章 为 空 
this.list = res.stories 
.filter(item -» item.type !-- 1); 


)) 


} 


«/script» 
文章 列表 list 为 数组 ， 每 一 项 的 结构 示例 如 下 : 


"stories": [ 
i 
"type": O, 
"id": 7097426, 
"title": "人 们 在 虚拟 生活 中 投入 的 精力 是 否 对 现实 生活 的 人 际 关系 有 积极 意义 ? " 


"type": 0, 

"id": 7101963, 

"title": " 写 给 想 成 为 心理 咨询 师 的 学 生 同 仁 "， 
"images": [ 


"http://picl.zhimg.com/xxx.jpg" 
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文章 列表 中 的 id 字段 是 文章 的 4， 请 求 文章 内 容 和 评论 列表 时 会 用 到 ，title 为 标题 ，images 
为 封面 图 片 ， 没 有 images 字段 就 不 显示 封面 图 片 。 


13.2.3 每 日 推荐 


应 用 初始 化 和 点 击 “ 每 日 推荐 ” 沫 单 时 请 求 推荐 的 文章 列表 。 推 荐 列表 的 API 相对 地 址 为 
news/before/20170503, before 后 面 是 查询 的 日 期 ， 这 个 日 期 比 要 查询 的 真实 日 期 多 一 天 ， 比 如 要 碍 
2017 年 5 月 2 日 推荐 的 内 容 ， 就 要 请 求 20170503。 每 日 推荐 可 以 无 限 次 地 向 前 一 天 查询 ， 为 方便 
操作 日 期 ， 在 libs/utiljs 内 定义 两 个 时 间 方 法 : 


// libs/util.js， 部 分 代码 省 略 
import axios from 'axios'; 


const Util = { 
); 


// SKBUSCK BSIST T8] REX 
Util.getTodayTime = function () ( 
const date = new Date(); 
date.setHours (0); 
date.setMinutes (0); 
date.setSeconds (0); 
date.setMilliseconds (0); 
return date.getTime(); 
j: 
// 获取 前 一 天 的 日 期 
Util.prevDay = function (timestamp = (new Date()).getTime()) { 
const date = new Date(timestamp); 
const year = date.getFullYear(); 
const month = date.getMonth() + 1 < 10 
? '0" + (date.getMonth() + 1) 
: date.getMonth() + 1; 
const day = date.getDate() < 10 
? 'O' + date.getDate () 
: date.getDate (); 
return year + '' + month + '' + day; 
} 
export default Util; 


Util.prevDay [52235 73 — RAIER — VE 38 BU — Z HJERT TH] REX. ASR 0 点 的 时 间 惟 为 基 
础 ， 也 就 是 通过 Util.getTodayTime 获取 的 时 间 戳 减 去 86400000 (24*60*60*1000) 。 这 种 方法 要 比 
直接 判断 前 一 天 的 日 期 简单 得 多 ， 因 为 每 个 月 的 日 期 是 不 固定 的 ， 另 外 还 需 特 殊 处 理 润 年 。 
推荐 文章 的 列表 获取 的 相关 代码 如 下 : 
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// app.vue， 部 分 代码 省 略 
«template» 

«div class-"daily-menu-item" 
Qclick-"handleToRecommend" 
:class-"( on: type === 'recommend' 

«/template» 
«script» 
import $ from './libs/util'; 
export default { 
data () { 
return { 
type: 
recommendList: 


'recommend', 
kbs 
dailyTime: $.getTodayTime (), 
isLoading: false 
), 
methods: { 

handleToRecommend () { 
'recommend' ; 


[1]; 


this.type - 
this.recommendList = 
this.dailyTime - 
this.getRecommendList (); 
), 
getRecommendList () { 


this.isLoading - true; 


} "> 每 日 推荐 </div> 


$.getTodayTime () ; 


const prevDay = $.prevDay(this.dailyTime + 86400000); 


$.ajax.get('news/before/' + prevDay).then(res => ( 


this.recommendList.push(res); 


this.isLoading - false; 


)) 


}, 
mounted () { 


this.getRecommendList (); 


} 
«/script» 


recommendList 为 推荐 文章 列表 的 数据 ， 在 初始 化 和 每 次 点 击 “ 每 日 推荐 ”菜单 时 都 会 请 求 数 
据 。dailyTime 默认 获取 今天 0 点 的 时 间 惟 ， 请 求 时 需要 多 加 一 天 。 因 为 推荐 列表 可 能 通过 “主题 
日 报 ” 的 子 类 切换 而 来 ， 需 要 重新 获取 一 遍 数 据 ， 所 以 handleToRecommend 方法 每 次 都 需要 清空 


列表 并 重新 设置 dailyTime。 
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推荐 列表 的 数据 结构 和 主题 日 报 基本 一 致 ， 不 同 的 是 多 了 一 个 date 字段 来 表示 请 求 列 表 的 日 
期 ， 比如 : 


{ 
"date": "20170502", 
"stories": [ 
{ 
"id": 9394848, 
"title": "在 庞大 的 体系 中 像 齿轮 一 样 工作 ， 如 何 避 免 “ 去 能 力 化 ”? ", 
"images": [ 
"https://pic4.zhimg.com/xxx.jpg" 

] ， 
"ga prefix": "050220", 
"type": 0 


) 


两 个 文章 列表 Aist, recommendL ist) 的 每 项 都 用 一 个 组 件 item.vue 来 展示 , 在 daily/components 
目录 下 新 建 item.vue 文件 ， 并 写 入 以 下 内 容 : 


// components/item.vue 
«template» 
«a class-"daily-item"» 
«div class-"daily-img" v-if-"data.images"» 
«img :src-"imgPath + data.images[0]"» 
«/div» 
«div 
class-"daily-title" 
:class="{ noImg: !data.images)"»(([ data.title }}</div> 
«/a» 
«/template» 
«script» 
import $ from '../libs/util'; 
export default { 
props: { 
data: { 
type: Object 


), 
data () { 
return { 


imgPath: $.imgPath 
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«/script» 

// style.css 

.daily-item( 
display: block; 
color: inherit; 
text-decoration: none; 
padding: 16px; 
overflow: hidden; 
cursor: pointer; 
transition: all .3s ease-in-out; 

} 

.daily-item:hover( 
background: 1e3e8ee; 

} 

.daily-img( 
width: 80px; 
height: 80px; 
float: left; 

} 

.daily-img imgí 
width: 100%; 
height: 100$; 
border-radius: 3px; 

} 

.daily-title( 
padding: 10px 5px 10px 90px; 

} 

-daily-title:noImg{ 
padding-left: 5px; 

} 


prop: data 里 可 能 没有 images 字段 ， 所 以 列表 会 显示 两 种 模式 ， 即 含 封面 图 和 不 含 封面 图 。 


Item 组 件 会 用 到 文章 列表 里 ，type 为 recommend 和 daily 两 种 类 型 下 ， 演 染 会 稍 有 不 同 。 
recommend 会 显示 每 天 的 日 期 ，daily 则 没有 ， 两 者 效果 如 图 13-3 所 示 。 
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每 日 推荐 每 日 推荐 新 片 」 二 月份， 值得 


你 走 进 影院 的 电影 总 会 
主题 日 报 导演 ， 你 尽管 反 转 ， 反 主题 日 报 n E iiini 
, ERIAS F3 
日 常 心理 学 
py A de E AET IE 
RW HE 2 前 ， 合 灯 是 个 什么 
VETE ACER UE RR P f Ue 电影 日 报 这 个 人 有 好 奇 心 
样 工作 ， 如 何必 人 免 


去 能 力 化 」 不 许 无 聊 


设计 日 报 伍 迪 ' 艾 伦 : 他 居然 说 目 
x LX nz 己 不 好 奇 ? | 这 个 人 有 
AER AUT ZI RS XXI 大 公司 H 报 好 奇 心 


烧 牛 脐 面 却 一 如 既往 得 

| 好 吃 

IMAX 中 国 即将 在 香港 
上 市 ， 它 如 何 用 5 年 时 
间 成 为 中 国电 影 市 场 上 
音乐 日 报 最 成 功 的 品牌 ? 


滴 血 就 想 检 测 癌症 ， 开始 游戏 


想 得 也 太 好 了 吧 
动漫 日 报 
体育 日 报 好 莱 坞 报告 完 颖 


到 底 什 么 是 好 莱 坞 (可 
能 ) 不 可 取代 的 东西 ? 


ET 
i ^m 





13-3 ”两 种 类 型 的 文章 列表 对 比 


对 应 的 代码 如 下 : 
// app.vue， 部 分 代码 省 略 


«template» 
«div class-"daily-list"» 
«template v-if-"type === 'recommend'"-» 
«div v-for-"list in recommendList"» 
«div class-"daily-date"»[( formatDay(list.date) }}</div> 
«Item 
v-for-"item in list.stories" 
:data-"item" 
Dkey-"item.id"»«/Item» 
«/div» 
«/template» 
«template v-if-"type === 'daily'"» 
«Item 
v-for-"item in list" 
:data-"item" 
Dkey-"item.id"»«/Item» 
«/template» 
«/div» 
«/template» 
«script» 


import Item from './components/item.vue'; 
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export default { 
components: { Item ], 
data () { 
return { 
type: 'recommend', 
recommendList: [], 
list: [T] 


b, 
methods: { 
// 转换 为 带 汉 字 的 月 日 
formatDay (date) { 
let month - date.substr(4, 2); 
let day = date.substr(6, 2); 
if (month.substr(0, 1) === 'O') month = month.substr(1, 1); 
if (day.substr(0, 1) === '0O') day = day.substr(1, 1); 
return ^$(month) 月 ${day} H`; 


} 
«/script» 
// style.css 
.daily-listí 
width: 300px; 
position: fixed; 
top: 0; 
bottom: 0; 
left: 150px; 
overflow: auto; 
border-right: lpx solid dd7dde4; 
} 
.daily-date{ 
text-align: center; 
margin: 10px 0; 


} 
13.2.4 ”自动 加 载 更 多 推荐 列表 

在 “每 日 推荐 ”类 型 下 ， 中 栏 的 文章 列表 深 动 到 底部 会 自动 加 载 前 一 天 的 推荐 列表 ， 所 以 要 
监听 中 栏 〈.daily-list) 的 滚动 事件 ， 并 在 合适 的 时 机 触发 加 载 请 求 : 

// app.vue， 部 分 代码 省 略 


«template» 


«div class-"daily-list" ref-"list"» 


«/div» 
«/template» 


«script» 


export default { 
data () { 


return { 


}, 


isLoading: false 


methods: { 


getRecommendList () { 


}, 


// 加 载 时 设置 为 true， 加 载 完 成 后 置 为 false 
this.isLoading = true; 
const prevDay = $.prevDay(this.dailyTime + 86400000); 
$.ajax.get('news/before/' + prevDay).then(res => { 
this.recommendList.push(res); 
this.isLoading - false; 


}) 


mounted () { 


this.getRecommendList (); 

// 获取 到 DOM 

const $list = this.$refs.list; 
// 监听 中 栏 的 滚动 事件 


$list.addEventListener('scroll', () => { 


} ) 


// 在 “主题 日 报 ” 或 正在 加 载 推荐 列表 时 停止 操作 
if (this.type === 'daily' || this.isLoading) return; 
// 已 经 滚动 的 距离 加 页 面 的 高 度 等 于 整个 内 容 区 域 高 度 时 ， 视 为 接触 底部 
工 工 
( 

Slist.scrollTop 

+ document.body.clientHeight 

>= $list.scrollHeight 


// 时 间 相 对 减少 一 天 
this.dailyTime -= 86400000; 


this.getRecommendList (); 
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} 


«/script» 


$list C.daily-list) 的 CSS 使 用 了 overflow: auto， 所 以 它 具 备 滚 动 的 能 力 ， 进 而 可 以 监听 滚动 
事件 。 直 接 操作 DOM 在 Vue 中 很 少见 ， 但 示例 的 场景 和 一 些 对 window. document 对 象 监听 事件 
的 场景 还 是 有 的 ， 使 用 监听 时 要 注意 在 beforeDestroy 生命 周期 使 用 removeEventListener 移 除 ， 本 
例 是 单 页 应 用 ， 所 以 不 需 此 操作 。$list 的 scroll 是 标准 DOM 事件 ， 所 以 也 可 以 用 Vue 的 v-on 指 
令 ， 比 如 上 例 也 可 以 改写 为 : 


<template> 
«div 
class-"daily-list" 
ref-"list" 
QGscroll-"handleScroll"»«/div» 
«/template» 
«script» 
export default { 
methods: { 
handleScroll () { 
const $list = this.$refs.list; 
if (this.type === 'daily' || this.isLoading) return; 
if 
( 
Slist.scrollTop 
+ document.body.clientHeight 
>= $list.scrollHeight 


this.dailyTime -- 86400000; 


this.getRecommendList () ; 


) 


«/script» 


13.3 ”文章 详情 页 


13.3.1 WRAS 


右 侧 的 文章 内 容 区 域 封装 成 了 一 个 组 件 。 在 components 目录 下 新 建 daily-article.vue 组 件 ， 它 
接收 唯一 的 一 个 prop: id， 也 就 是 文章 的 id, WR id 变化 了 ， 就 说 明 切 换 了 文章 ， 需 要 请 求 新 的 
文章 内 容 。 
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在 app.vue 中 导入 daily-article.vue 组 件 ， 并 在 文章 列表 的 Item 组 件 上 绑 定 查看 文章 事件 : 
// app.vue， 部 分 代码 省 略 和 简写 


<template> 
«div class="daily"> 
«Item Qclick.native-"handleClick(item.id)"»«/Item» 
«daily-article :id-"articleId"»«/daily-article» 
«/div» 
«/template» 
«script» 
import Item from './components/item.vue'; 


import dailyArticle from './components/daily-article.vue'; 


export default { 
components: { Item, dailyArticle ], 
data () { 
return { 


articleId: O0 


), 
methods: { 
handleClick (id) { 
this.articleId - id; 


} 


«fserinE» 


Item 是 组 件 ， 绑 定 原生 事件 时 要 带 事件 修饰 符 native, 否则 会 认为 监听 的 是 来 自 Item 组 件 的 
H E XHY click. 
dailyArticle 组 件 在 监听 到 id 改变 时 请 求 文章 内 容 : 


// components/daily-article.vue 
«template» 
«div class-"daily-article"» 
«div class-"daily-article-title"»[| data.title ))«/div» 
«div class-"daily-article-content" v-html-"data.body"»«/div» 
«/div» 
«/template» 
«script» 
import $ from '../libs/util'; 
export default { 
props: { 
id: | 
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type: Number, 
default: 0 


data () ( 
return { 
data: {} 


), 
methods: { 
getArticle () { 
$.ajax.get('news/' + this.id).then(res => { 
// 将 文章 的 中 的 图 片 地 址 蔡 换 为 代理 的 地 址 
res.body = res.body 
.replace(/src-"http/g, 'src="' + $.imgPath + 'http'); 
res.body = res.body 
.replace(/src-"https/g, 'src-"' + $.imgPath + 'https'); 
this.data = res; 
// 返 回 文 章 顶 端 
window.scrollTo(0, 0); 


)) 


), 
watch: { 
id (val) { 
if (val) this.getArticle(); 


}; 

«/script» 

// style.css 

.-daily-article( 
margin-left: 450px; 
padding: 20px; 

} 
-daily-article-title{ 
font-size: 28px; 

font-weight: bold; 
color: $222; 
padding: 10px 0; 

} 

.View-more al 


display: block; 


} 


第 13 章 实战 : 知 乎 日 报 项 目 开 发 281 


cursor: pointer; 
background: #f5f7f9; 
text-align: center; 
color: inherit; 
text-decoration: none; 
padding: 4px O0; 


border-radius: 3px; 


数据 的 data 结构 为 : 


{ 


"https: 


} 


"title": "这 茶 ， 明 显 是 用 了 梅雨 期 的 雨水 ， 我 还 是 喜欢 用 腊月 的 雪 水 "， 

"body": "文章 内 容 ， 格 式 为 html"， 

"id": 9395306, 

"type": O, 

"image": 

//pic3.zhimg.com/v2-dbf5d6e5eeeccaacc67af4d625e0699a.jpg", 

"image source": "T.Tseng / CC BY", 

"images": [ 
"https://pic4.zhimg.com/v2-5cb4fcbd56bb6717969e9967829929b7 . jpg" 

]; 

"share url": "http://daily.zhihu.com/story/9395306", 

"ga prefix": "050311", 

"js": []; 

mess z T 


"http://news-at.zhihu.com/css/news qa.auto.css?v-4b3e3" 


这 里 只 用 到 了 title 和 body, HEF body 的 格式 为 html， 需 要 用 v-html 指令 直接 显示 。 用 户 可 
能 会 在 某 篇 文章 阅读 到 一 定位 置 时 切换 了 别 的 文章 ， 这 时 文章 的 滚动 条 仍 停留 在 上 次 浏览 的 位 置 ， 
使 用 window.scrollTo(0, 0) 可 以 返回 页 面 的 顶端 。 需 要 注意 的 是 ，.daily-article 并 没有 使 用 overflow: 
auto 滚动 ， 而 是 自然 高 度 ， 所 以 这 里 是 让 页 面 返回 顶端 ， 而 不 能 设置 .daily-article 的 scrollTop 为 0。 


13.3.2 


加 载 评论 


每 篇 文章 底部 要 加 载 评论 ， 效 果 如 图 13-4 所 示 。 
评论 的 数据 结构 为 : 


"comments": [ 


{ 
"author": "ŠER", 
"Content": "AWT 佩服 于 极限 运动 者 的 勇气 但 我 想 这 应 该 是 小 圈子 内 的 英雄 "， 


"avatar": "http://picl.zhimg.com/xxx.jpg", 
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"Lime": 1493788345, 
"id": 28885287, 


"likes": 0 


评论 (20) 


城 里 的 月 光 -L 
M ”1 小 时 前 


《告白 》 一 一 震撼 到 了 ! 


三 体 针眼 画师 


1 小 时 前 


感觉 要 花 很 久 起 掉 剧 透 


我 是 在 微 信 上 关注 了 影视 的 公众 号 


Vincent Lee1900 
2 小 时 前 


天 才 雷 普 利 


徐 冉 


;小 时 前 


万 能 钥匙 我 咋 还 没 看 





13-4 评论 列表 


每 条 评论 要 显示 发 表 时 间 ， 源 数据 格式 为 时 间 惟 ， 需 要 前 端 转 为 相对 时 间 。 在 第 8 章 自 定义 
指令 的 8.2.2 小 节 实现 了 一 个 v-time 的 自 定义 指令 ， 用 于 时 间 惟 转换 ， 可 以 直接 使 用 ,但 是 要 修改 
为 ES6 Module 语法 导出 模块 。 在 daily 目录 下 创建 directives 目录 ， 并 创建 tme.js 文件 ， 写 入 以 下 
内 容 : 


// directives/time.js 
var Time = { 
// 获取 当前 时 间 玲 
getUnix: function () { 
var date - new Date(); 
return date.getTime(); 
b, 
// 获取 今天 0 点 0 分 0 秒 的 时 间 戳 
getTodayUnix: function () { 
var date - new Date(); 
date.setHours (0); 


date.setMinutes (0); 
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date.setSeconds (0); 
date.setMilliseconds (0); 
return date.getTime(); 
), 
// SAkKWUSSsEYHAH OR 04r o PRIR [RIA 
getYearUnix: function () ( 
var date - new Date(); 
date.setMonth (0) ; 
date.setDate (1) ; 
date.setHours (0); 
date.setMinutes (0) ; 
date.setSeconds (0); 
date.setMilliseconds (0); 
return date.getTime(); 
b, 
// 获取 标准 年 月 日 
getLastDate: function(time) { 
var date - new Date(time); 
var month = date.getMonth() + 1 < 10 ? 'O' + (date.getMonth() + 1) : 
date.getMonth() + 1; 
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); 
return date.getFullYear() + '-' + month + "-" + day; 
), 
// 转换 时 间 
getFormatTime: function(timestamp) { 
var now = this.getUnix(); / / *4gif EER 
var today = this.getTodayUnix(); // 今 天 0 点 时 间 惟 
var year = this.getYearUnix();  // 今 年 0 AIER 
var timer = (now - timestamp) / 1000;  // 转换 为 秒 级 时 间 戳 


var tip = ''; 


if (timer <= 0) { 


tip = "刚刚 ' ; 
) else if (Math.floor(timer/60) <= 0) { 
tip = "刚刚 ' ; 


} else if (timer < 3600) { 
tip = Math.floor(timer/60) + ' 分 钟 前 '; 

} else if (timer >= 3600 && (timestamp - today >= 0) ) { 
tip = Math.floor(timer/3600) + 小 时 前 '; 

} else if (timer/86400 <= 31) { 
tip = Math.ceil(timer/86400) + ' 天 前 '; 

) else { 


tip = this.getLastDate (timestamp); 
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} 


return tip; 


export default { 

bind: function (el, binding) { 
el.innerHTML = Time.getFormatTime(binding.value * 1000); 
el. timeout = setInterval(function() { 

el.innerHTML = Time.getFormatTime(binding.value * 1000); 

), 60000); 

), 

unbind: function (el) { 
clearInterval(el. timeout ); 


delete el. timeout ; 


} 
关于 自 定 义 指令 和 v-time 的 详细 介绍 ， 可 以 回顾 8.2.2 小 节 的 内 容 。 
评论 列表 在 获取 完 文 章 内 容 后 再 获取 ， 代 码 如 下 : 


// components/daily-article.vue， 部 分 代码 省 略 


«template» 
«div class-"daily-article"» 
«div class-"daily-article-title"»[([ data.title }}</div> 
«div class-"daily-article-content" v-html-"data.body"»«/div» 


«div class-"daily-comments" v-show-"comments.length"-» 
<span> 评 论 ((( comments.length }}) </span> 
«div class-"daily-comment" v-for-"comment in comments"-» 
«div class-"daily-comment-avatar"» 
«img :src-"comment.avatar"» 
«/div» 
«div class-"daily-comment-content"» 
«div class-"daily-comment-name"»[(( comment.author }}</div> 
«div class-"daily-comment-time" 
v-time-"comment.time"»«/div» 
«div 
class-"daily-comment-text"»[( comment.content }}</div> 
«/div» 
«/div» 
«/div» 
«/div» 


«/template» 
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«script» 
import Time from '../directives/time'; 
import $ from '../libs/util'; 


export default { 
directives: ( Time ], 
props: { 
id: ( 
type: Number, 
default: 0 


), 
data () { 


return { 
data: (], 


comments: [] 


), 
methods: { 
getArticle () { 
$.ajax.get('news/' + this.id).then(res => { 
FE uus 
this.getComments () ; 
)) 
b, 
getComments () { 


this.comments - []; 


$.ajax.get('story/' + this.id + '/short-comments').then(res => { 


this.comments = res.comments.map(comment => { 
// 将 头像 的 图 片 地 址 转 为 代理 地 址 
comment.avatar = S$S.imgPath + comment.avatar; 


return comment; 
FH 
)) 


}; 
«/script» 
// style.css 
.-daily-comments |( 


margin: 10px O0; 


.-daily-comments spaní 
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display: block; 
margin: 10px O0; 
font-size: 20px; 

} 

.daily-comment { 
overflow: hidden; 
margin-bottom: 20px; 
padding-bottom: 20px; 
border-bottom: lpx dashed 4e3e8ee; 

l 

.daily-comment-avatar{ 
width: 50px; 
height: 50px; 
float: left; 

} 

.daily-comment-avatar img{ 
width: 100%; 
height: 100%; 
border-radius: 3px; 

} 

.daily-comment-content{ 
margin-left: 65px; 

} 


.daily-comment-name{ 


} 
.daily-comment-time{ 
color: #9ea7b4; 

font-size: 14px; 

margin-top: 5px; 
} 
.daily-comment-text{ 

margin-top: 10px; 
} 


以 上 就 是 日 报 项 目的 所 有 细节 分 析 和 代码 。 
13.4 总 结 


本 章 所 有 的 代码 已 上 传 至 GitHub, 访问 下 面 的 链接 可 以 查看 到 并 直接 使 用 : 
https://github.com/icarusion/vue-book 
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vue-book 下 的 daily 目录 就 是 本 章 的 代码 ， 在 该 日 录 下 执行 npm install 命令 会 自动 安装 所 有 的 
依赖 ， 然 后 执行 npm run dev 启动 webpack 服务 ， 执 行 node proxy js 启动 代理 服务 。 
日 报 项 目 以 单 页 面 的 形式 呈现 ， 基 本 禾 盖 了 Vue 和 webpack 的 核心 功能 ， 它 们 包括 : 


Vue 的 单 文件 组 件 用 法 。 
Vue 的 基本 指令 、 自 定义 指令 。 
数据 的 获取 、 整 理 、 可 视 化 。 
prop、 事 件 、 子 组 件 索 引 。 
ES6 模块 。 

日 报 项 目 是 一 个 较 独 立 的 单 页 小 应 用 ， 没 有 使 用 路 由 和 大 规模 状态 管理 插件 Vuex， 在 工程 上 
并 不 算 复 杂 ， 比 较 适 合 刚 入 手 Vue 的 练习 项 目 。 虽 然 看 似 简 单 ， 但 它 履 盖 了 业务 中 很 多 场景 ， 对 
代码 进行 了 组 织 和 模块 化 ， 很 接近 真实 的 生产 项 目 。 项 目 对 代码 维护 和 扩展 性 也 有 考虑 ， 比 如 对 
Ajax 的 封装 、 通 用 工具 函数 的 提取 、 组 件 的 解 耦 等 ， 这 些 细节 都 是 在 实际 项 目 中 要 考虑 的 。 


练习 : 参考 知 平日 报 移动 App 的 UI 设计， 基于 本 章 内 容 开 发 移动 Web 版 。 
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本 章 将 结合 本 书 所 有 的 知识 点 (包括 webpack. Vuex. vue-router 等 ) 来 开发 一 个 具有 代表 性 
的 电 商 网 站 项 目 。 所 涉及 的 内 容 涵盖 了 许多 典型 场景 ， 如 商品 列表 按照 价格 、 销 量 排序 ;商品 列表 
按照 品牌 、 价 格 过 滤 ; 动态 的 购物 车 ， 使 用 优惠 码 等 。 

本 章 仍 然 会 使 用 前 面 章节 的 基本 webpack 配置 所 有 的 代码 也 上 传 全 GitHub, 访问 链接 可 以 
查看 并 直接 使 用 : https://github.com/icarusion/vue-book/tree/master/shopping。 


14.1 项 目 工程 搭建 


新 建 目录 shopping， 复 制 第 10.2 节 的 webpack 开发 环境 和 生产 环境 的 两 个 配置 文件 
Cwebpack.config.js. webpack.prod.config.js) 及 package.json 等 核心 文件 ， 并 通过 NPM 完成 安装 。 
项 目的 主要 配置 在 于 main.js 文件 。 
本 章 会 使 用 到 Vue.js 的 路 由 插件 vue-router 和 状态 管理 插件 Vuex， 首先 在 main.js 中 导入 并 做 
初始 化 配置 : 


// main.js 

import Vue from 'vue'; 

import VueRouter from 'vue-router'; 
import Routers from './router.js'; 
import Vuex from 'vuex'; 

import App from './app.vue'; 


import './style.css'; 


Vue.use(VueRouter); 


Vue.use(Vuex); 
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// 路 由 配置 
const RouterConfig = { 


// 使 用 HTML 5 的 History 路 由 模式 
mode: 'history', 
routes: Routers 


const router - new VueRouter (RouterConfig); 


router.beforeEach((to, from, next) => { 
window.document.title = to.meta.title; 
next (); 


} ) 7 


router.afterEach((to, from, next) => { 
window.scrollTo(0, 0); 


} ) 7 


const store = new Vuex.Store(í 


state: { 


} ， 
getters: { 


), 


mutations: { 


), 


actions: { 


}); 


new Vue(( 
el: 'f£fapp', 
router: router, 
store: store, 
render: h => { 


return h (App) 


)); 
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其 中 ， 路 由 的 页 面 配置 放 在 了 routerjs 文件 内 单独 维护 ; Vues 默认 设置 了 state, getters, 
mutations、actions， 之 后 随 项 目 需求 持续 添加 。 

项 目 中 全 局 使 用 的 一 些 CSS 样式 写 在 了 style.css 文件 内 , 在 main.js 中 直接 导入 , webpack 1T 
包 时 ， 会 将 此 CSS 文件 与 .vue 单 文件 中 的 CSS (包括 scoped) 一 同 提取 ， 输 出 到 main.css 文件 。 

在 shopping 目录 下 新 建 views 目录 ， 用 于 放置 每 个 路 由 页 面 的 .vue 文件 ， 新 建 components H 
录用 来 存放 公共 组 件 ; 新 建 images 目录 用 来 存放 项 目 中 用 到 的 图 片 。 配置 完 这 些 后 , 通过 NPM 运 
fT npm run dev 命令 ， 启 动 webpack 服务 ， 这 样 就 完成 了 基础 工程 的 搭建 。 


14.2 ”商品 列表 页 


14.2.1 需求 分 析 与 模块 拆 分 


商品 列表 页 面 用 于 展示 相关 的 所 有 商品 ， 一 般 有 具有 往 选 和 排序 两 种 过 滤 方 法 。 比 如 可 以 按照 
Wn Cul Apple, Beats. Bose) 或 颜色 筛选 (如 白色 、 人 金色 ) ， 算 选 条 件 可 以 县 加 (比如 白色 
的 Beats 品牌 ) 。 可 以 按照 价格 、 销 量 等 在 短 选 的 基础 上 再 进行 排序 , 最 终 过 滤 出 符合 要 求 的 商品 。 
最 终 完 成 的 效果 如 图 14-1 所 示 。 


电 商 网 站 示例 
品牌 : Apple Beats Sonos B&O Bose 


He: ne se 红色 HE 
HET: EUM dim fMi 


BeatsX 入 耳 式 耳机 Beats Solo3 Wirele... Beats Pill+ 便携 式 扬 ..， 
® e 
Y 1188 Y 2288 Y 1888 


US 


图 14-1 商品 列表 页 效果 图 


排序 为 单 选 ， 初 始 按 “默认 ”进行 排序 ， 其 中 价格 可 分 为 升序 (价格 从 低 到 高 》 和 降序 价 
格 从 高 到 低 ) 两 种 排序 ， 销 量 则 只 有 降序 。 
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品牌 和 颜色 都 是 单 选 ， 单 次 点 击 选中 ， 再 次 点 击 取消 选中 。 

初次 打开 商品 列表 页 会 请 求 一 次 远程 数据 (示例 用 setTimeout 模拟 异步 ， 真 实 场景 应 该 通过 
Ajax 获取 ) ， 获 取 到 全 量 的 商品 数据 ， 然 后 筛选 和 排序 都 是 在 本 地 完成 《真实 场景 也 有 在 服务 端 
进行 第 选 和 排序 的 做 法 ， 因 为 商品 很 有 8 可 能 会 分 页 ， 前 端 一 次 性 拿 到 所 有 数据 不 现实 〉。 

商品 列表 页 主要 有 两 个 模块 ， 一 个 是 路 由 组 件 C(views/listvue) ， 负 责 数 据 的 请 求 、 过 滤 相 关 
的 逻辑 ， 另 一 个 是 商品 简介 组 件 (components/product.vue， 即 每 个 商品 卡片 》， 鼠 标 经 过 时 ， 显 示 
出 加 入 购物 车 的 按钮 ， 如 图 14-2 所 示 。 


AirPods 





14-2 商品 简介 组 件 示意 图 
两 个 模块 的 样式 都 直接 写 在 各 自 的 .vue 文件 的 <style scoped> 部 分 。 
14.2.2 商品 简介 组 件 


上 一 节 中 , 图 14-2 已 经 展示 了 商品 简介 组 件 的 效果 , 本 节 将 完成 该 组 件 的 开发 。 在 components 
目录 下 新 建 product.vue 文件 。 每 个 商品 的 选项 比较 多 ， 比 如 标题 、 价 格 、 颜 色 等 ， 为 方便 父子 组 
件 之 间 传 递 ， 直 接 在 productvue 中 设置 一 个 property: info 来 接收 一 个 对 象 格式 的 数据 ， 这 样 扩展 
性 较 高 ， 父 级 也 可 直接 将 获取 到 的 数据 传递 过 来 ， 省 去 了 拆 分 的 工作 。 

info 数据 结构 如 下 : 


// info 
{ 
ad: 1, 
name: 'AirPods', 
brand: 'Apple', 
image: 'http://ordfm6aah.bkt.clouddn.com/shop/1l.jpeg', 
sales: 10000, 
cost: 1288, 
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color: ' 白 色 ' 
} 


其 中 ，id 是 商品 的 14， 点 击 卡片 会 进入 该 商品 的 详情 页 面 ， 后 面 章节 会 陆续 介绍 。name 是 商 
品名 称 ，brand 为 品牌 ，image 是 图 片 ，sales 是 销量 ，cost 为 单价 ，color AAE. MEBI, Al 
为 直接 返回 的 中 文 无 法 对 应 到 具体 的 色 值 ， 所 以 在 product.vue 的 data 选项 中 定义 一 个 map， 用 于 
映射 颜色 和 色 值 。 相 关 代 码 如 下 : 


// product .vue， 部 分 代码 省 略 
«script» 
export default { 
props: { 
info: Object 
), 
data () { 
return { 
colors: 1 
Dti THEREREECES, 
' 金 色 ' : '4dac272', 
' 蓝 色 ' : 149233472", 
'"ZL&': '#f2352e' 


«/script» 


鼠标 悬 停 在 卡片 上 时 会 显示 “加 入 购物 车 ”按钮 ， 本 节 先 定义 好 内 容 ， 有 具体 实现 将 在 1444 75 
完成 。 

product 组 件 的 模板 代码 如 下 : 

// product .vue， 部 分 代码 省 略 


<template> 
<div class="product"> 
«router-link 
:to-"'/product/' + info.id" 
Cclass-"product-main"-» 
«img :src-"info.image"» 
<h4>{{ info.name }}</h4> 
«div 
class-"product-color" 
:style-"( background: colors[info.color])"»«/div» 
«div class-"product-cost"»€X {{ info.cost }}</div> 
«div 


class-"product-add-cart" 
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@click.prevent="handleCart"> 加 入 购物 车 </div> 
«/router-link» 
«/div» 
«/template» 
«script» 
export default { 
methods: { 
handleCart () { 


this.$store.commit('addCart', this.info.id); 


}; 
«/script» 


<router-link> 最 终 会 泻 染 为 一 个 <a> 标 签 ， 链 接 到 :to 定义 的 url， 也 就 是 商品 详情 页 ，id 会 作为 
参数 通过 vue-router 传递 。 
“加 入 购物 车 ”按钮 对 @click 事件 使 用 了 prevent 修饰 符 来 阻止 冒 泡 , 否则 在 点 击 按钮 的 同时 ， 
也 会 点 击 到 <a> 标签 进入 详情 页 。 
“加 入 购物 车 ”按钮 先 设置 了 一 个 handleCart 方法 ， 通 过 Vuex 触发 mutation 保存 到 购物 车 ， 
参数 为 商品 的 i 4， 具体 逻辑 将 在 后 面 介绍 。 
product 组 件 的 样式 代码 如 下 : 


//product .vue， 部 分 代码 省 略 
<style scoped> 

.product{ 
width: 25$; 
float: left; 

} 

.-product-main(í 
display: block; 
margin: lópx; 
padding: 16px; 
border: lpx solid f$dddeel; 
border-radius: 6px; 
overflow: hidden; 
background: #fff; 
text-align: center; 
position: relative; 

} 

.product-main img{ 
width: 100%; 


h4( 
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color: 4222; 


overflow: hidden; 


text-overflow: ellipsis; 


white-space: nowrap; 

} 

.-product-main:hover h4[( 
color: $0070c9; 

} 

-product-colorí 
display: block; 
width: 16px; 
height: 16px; 


border: lpx solid f$dddeel; 


border-radius: 50$; 
margin: 6px auto; 

} 

-product-cost [ 
color: #de4037; 
margin-top: 6px; 

} 

-product-add-cart |í 
display: none; 
padding: 4px 8px; 
background: #2d8cf0; 
color: FLEE? 
font-size: 12px; 
border-radius: 3px; 
cursor: pointer; 
position: absolute; 
top: Spr; 
right: 5px; 

} 
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-product-main:hover .product-add-cart( 


display: inline-block; 


} 
«/style» 


这 里 给 <style> 加 了 scoped 属性 ， 所 以 样式 只 针对 product.vue 组 件 生效 ， 不 会 影响 其 他 组 件 。 


在 class 的 命名 上 ， 有 很 多 种 规范 ， 这 里 推荐 以 模块 为 首 ， 依 次 用 “-” 分 割 作用 域 ， 


比 


如 .product、.product-main、.product-main-img。 如 果 你 使 用 Less 或 其 他 CSS 预 处 理 做 开发 ， 写 起 


来 会 很 舒服 ， 比 如 上 面 的 样式 可 以 改写 为 : 
// product .vue， 改 写 后 的 样式 ， 以 Less 为 例 


«style scoped lang="less"> 
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Qprefix-cls: "product"; 


.QG(prefix-cls])( 
width: 259; 
float: left; 


&-mainí 


) 


display: block; 
margin: 16px; 
padding: 16px; 
border: lpx solid f$dddeel; 
border-radius: 6px; 
overflow: hidden; 
background: #fff; 
text-align: center; 
position: relative; 
& img{ 

width: 1005; 


h4( 


colors $222; 
overflow: hidden; 
text-overflow: ellipsis; 


white-space: nowrap; 


&:hover h4( 


) 


color: 4$0070c9; 


&-color( 


} 


display: block; 

width: 16px; 

height: 16px; 

border: lpx solid #dddeel; 
border-radius: 50$; 


margin: 6px auto; 


&-cost(í( 


) 


color: 4de4037; 


margin-top: 6px; 


&-add-cart(í( 


display: none; 
padding: 4px 8px; 
background: 42d8cf0; 
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color: $frft. 
font-size: 12px; 
border-radius: 3px; 
cursor: pointer; 
position: absolute; 
LODS: 3px; 
right: 5px 

} 

&:hover .Q(prefix-cls]( 


display: inline-block; 


) 
«/style» 


使 用 CSS 预 编 译 的 好 处 有 很 多 ， 比 如 支持 变量 ,封装 相同 样式 为 图 数 、 循 环 等 。 但 是 webpack 
默认 是 不 文 持 的 ， 需 要 配置 less-loader。 


配置 less 的 方法 


首先 通过 NPM 安装 less 和 less-loader: 


npm install less --save-dev 


npm install less-loader --save-dev 


然后 在 webpack 中 配置 less-loader， 部 分 代码 省 略 : 


module: { 
rules: [ 
{ 
test: /N.vue$/, 
loader: 'vue-loader', 
options: { 
loaders: { 
less: ExtractTextPlugin.extract ({ 
use: ['css-loader', 'less-loader'], 
fallback: 'vue-style-loader' 
} ) ， 
css: ExtractTextPlugin.extract([í 
use: ['css-loader', 'less-loader'], 
fallback: 'vue-style-loader' 
)) 


test: /\.less/, 
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use: ExtractTextPlugin.extract(( 
use: ['less-loader'], 
fallback: 'style-loader' 

)) 


} 
14.2.3 ”列表 按照 价格 、 销 量 排 序 
在 views 目录 下 新 建 listvue 文件 ， 并 在 router.js 中 添加 商品 列表 的 路 由 配置 : 


// router.js 
const routers - [ 
i 
paths: '/lIist', 
meta: { 
title: ' 商 品 列表 ' 
), 


component: (resolve) -» require(['./views/list.vue'], resolve) 


paths '"**. 


redirect: '/list' 


] ; 


export default routers; 


我 们 先 把 数据 搞定 ， 再 来 看 listvue。 列 表 相 关 的 数据 都 通过 Vuex 来 维护 ， 可 以 回顾 第 11 章 
11.2 节 的 内 容 。 

首先 需要 获取 商品 列表 的 数据 ， 获 取 是 异步 的 ， 所 以 要 与 在 Vuex 的 actions 里 。 在 真实 场景 
中 ,数据 应 当 是 通过 Ajax 从 服务 端 获 取 的 ,本 实例 用 setTimeout 来 模拟 异步 ,并 用 本 地 数据 来 mock。 

在 根 目 录 shopping. 下 新 建文 件 productjs， 并 与 入 以 下 数据 ; 


// product.js 
export default [ 
i 
id: 1, 
name: 'AirPods', 
brand: 'Apple', 
image: 'http://ordfm6aah.bkt.clouddn.com/shop/1l.jpeg', 
sales: 10000, 
cost: 1288, 
color: ' 白 色 ' 
}, 
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Ad: 2, 

name: 'BeatsX 入 耳 式 耳机 '， 

brand: 'Beats', 

image: 'http://ordfm6aah.bkt.clouddn.com/shop/2.jpeg', 
sales: 11000, 


cost: 1188, 
color: ' 白 色 ' 
), 
i 
id: d; 


name: 'Beats Solo3 Wireless 头 戴 式 式 耳 机 '" ， 

brand: 'Beats', 

image: 'http://ordfm6aah.bkt.clouddn.com/shop/3.jpeg', 
sales: 5000, 


cost: 2288, 
color: '&f&' 
), 
i 
id: 4, 


name: 'Beats Pill 便携 式 扬声器 ' ， 

brand: 'Beats', 

image: 'http://ordfm6aah.bkt.clouddn.com/shop/4.jpeg', 
sales: 3000, 

cost: 1888, 

color: '£[f&' 


Id: 3 

name: 'Sonos PLAY:1 无 线 扬 声 器 '， 

brand: 'Sonos', 

image: 'http://ordfm6aah.bkt.clouddn.com/shop/5.jpeg', 
sales: 8000, 

cost: 1578; 

color: ' 白 色 ' 


id: 5; 

name: 'Powerbeats3 by Dr. Dre Wireless 入 耳 式 耳机 '， 
brand: 'Beats', 

image: 'http://ordfm6aah.bkt.clouddn.com/shop/6.jpeg', 
sales: 12000, 

cost: 1488, 
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color: ' 金 色 ' 


idé Ti 

name: 'Beats EP 头 戴 式 耳机 ' ， 

brand: 'Beats', 

image: 'http://ordfm6aah.bkt.clouddn.com/shop/7.jpeg', 
sales: 25000, 


cost: 788, 
color: ' 蓝 色 ， 
}, 
{ 
id: B, 


name: 'B&O PLAY BeoPlay A1 便携 式 蓝牙 扬声器 ' ， 

brand: 'B&O', 

image: 'http://ordfm6aah.bkt.clouddn.com/shop/8.jpeg', 
sales: 15000, 


cost: 1898, 
color: ' 金 色 ' 
}, 
{ 
id: 9, 


name: 'BoseG QuietComfortG 35 无 线 耳 机 ' 

brand: 'Bose', 

image: 'http://ordfm6aah.bkt.clouddn.com/shop/9.jpeg', 
sales: 14000, 

cost: 287B, 

color: ' 蓝 色 ' 


id: I0 

name: 'B&O PLAY Beoplay H4 无 线头 戴 式 耳机 '， 

brand: 'B&O', 

image: 'http://ordfm6aah.bkt.clouddn.com/shop/10.jpeg', 
sales: 9000, 

cost: 2298, 

color: ' 金 色 ' 


] 
在 main.js 中 导入 数据 ， 并 在 Vuex 中 声明 数据 列表 相关 的 state、mutations、actions: 


// main.js， 部 分 代码 省 略 
// 导入 数据 
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import product data from './product.js'; 


const store = new Vuex.Store(í 
state: { 
// 商品 列表 数据 
productList: [], 
// 购 物 车 数据 
cartList: [] 


), 
mutations: { 
// 添 加 商品 列表 
setProductList (state, data) { 
state.productList - data; 


), 
actions: { 
// 请 求 商品 列表 
getProductList (context) { 
// 真实 环境 通过 Ajax 获取 ， 这 里 用 异步 模拟 
setTimeout(() => { 


context.commit('setProductList', product data); 


}, 500); 


)); 
首先 通过 action 的 getProductList 方法 获取 数据 , 然后 由 mutation 的 setProduction 方法 将 数据 


设置 到 productList。 
准备 好 了 数据 ， 再 来 看 视图 部 分 。 先 在 根 实例 app.vue 中 挂 载 路 由 并 设置 导航 条 : 


// app.vue 
«template» 
«div» 
«div class-"header"» 
«router-link 
to-"/list" 
class="header-title"> 电 商 网 站 示例 </router-link> 
«div class="header-menu"> 
«router-link to-"/cart" class-"header-menu-cart"» 
购物 车 
«span v-if-"cartList.length"»(( cartList.length }}</span> 
«/router-link» 
«/div» 


«/div» 
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«router-view»«/router-view» 
«/div» 
«/template» 
«script» 
export default { 
computed: { 
cartList () { 


return this.$store.state.cartList; 


} 


«/script» 


数据 cartList 是 购物 车 中 添加 的 商品 ， 后 面 会 介绍 。 路 由 视图 <router-view> 挂 载 了 所 有 的 路 由 
组 件 。 
app.vue 的 样式 在 style.css 中 全 局 定义 : 


// style.css 
"y 
margin: 0; 
padding: 0; 
} 
a{ 
text-decoration: none; 
} 
body{ 
background: #f8f8f9; 
} 
.header( 
height: 48px; 
line-height: 48px; 
background: rgba(0,0,0,.8); 
color: 4fff; 
} 
.header-title( 
padding: 0 32px; 
float: left; 
color: LEL; 
} 
.header-menu{ 
float: right; 
margin-right: 32px; 
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.header-menu-cart ( 
Golor: fE; 

} 

.header-menu-cart spant 
display: inline-block; 
width: 16px; 
height: 16px; 
line-height: 16px; 
text-align: center; 
border-radius: 50$; 
background: #ff5500; 
color: 4fff; 
font-size: 12px; 


} 


商品 列表 页 list. vue 在 初始 化 时 调用 Vuex 的 action 触发 请 求 数据 操作 ,并 设置 计算 属性 从 Vuex 
中 读 取 数据 productList。 相 关 代码 如 下 : 


// list.vue， 部 分 代码 省 略 
<template> 
«div v-show-"list.length"» 
«Product v-for-"item in list" :info-"item" :key-"item.id"»«/Product» 
«/div» 
«/template» 
«script» 
// 导入 商品 简介 组 件 
import Product from '../components/product.vue'; 
export default { 
components: { Product ], 
computed: { 
list () { 
// 从 Vuex 获取 商品 列表 数据 


return this.$store.state.productList; 


), 


mounted () { 
// 初始 化 时 ， 通 过 Vuex 的 action 请 求 数据 


this.$store.dispatch('getProductList'); 


} 


«/script» 


打开 浏览 器 ， 此 时 已 经 可 以 演 染 出 商品 列表 了 。 
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实现 按照 价格 、 销 量 排序 ， 就 不 能 直接 使 用 数据 list， 也 不 能 直接 重 置 list〈 因 为 过 沽 不 是 一 
次 性 的 ， 所 以 不 能 破坏 原 数据 ， 人 否则 无 法 复原 ) ， 上 所 以 用 计算 属性 来 动态 返回 过 滤 后 的 数据 。 相 关 
代码 如 下 : 


// list.vue， 部 分 代码 省 略 
<template> 
«div v-show-"list.length"» 
«Product 
v-for-" item in filteredAndOrderedList" 
:info-"item" 
:key-"item.id"»«/Product» 
«div 
class-"product-not-found" 
Vv-show="!filteredAndorderedList.length"> 暂 无 相关 商品 </div> 
</div> 
</template> 
<script> 
import Product from '../components/product.vue'; 
export default { 
components: { Product ], 
data () { 
return { 
// 排序 依据 ， 可 选 值 为 : 
// sales (销量 ) 
// cost-desc (价格 降序 ) 
// cost-asc (价格 升序 ) 


order: '' 


), 
computed: { 
list () I 
return this.$store.state.productList; 
} ， 
filteredAndOrderedList () { 
// 复制 原始 数据 
let list - [...this.list]; 
// todo 按 品牌 过 滤 
// todo 按 颜色 过 滤 


// 排序 
if (this.order !== '') { 
if (this.order === 'sales') { 


list = list.sort((a, b) => b.sales = a.sales); 


} else if (this.order === 'cost-desc') { 
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list = list.sort((a, b) —» b.cost - a.cost); 
) else if (this.order === 'cost-asc') { 


list = list.sort((a, b) => a.cost = b.cost); 


) 


return list; 


} 
«/script» 
«style scoped» 
-product-not-found( 
text-align: center; 
padding: 32px; 
} 


«/style» 
ES 6 语法 提示 : 
i$ Om 展开 运算 符 ，let list = [...list] 相当 于 克隆 了 一 份 数 据 。 


计算 属性 filteredAndOrderedList 将 list 进一步 过 滤 ， 返 回 筛选 、 排 序 后 的 数据 ， 排 序 依据 于 
data: order， 默 认为 空 ， 即 默认 的 排序 为 sales、cost-desc、cost-asc 时 则 分 别 按照 销量 、 价 格 降 序 、 
价格 升序 来 排序 。 排 序 直 接 使 用 JavaScript 数组 的 sort 方法 对 前 后 两 个 值 比 较 大 小 。 

把 <Produc 人 循环 的 数据 由 list 改 为 filteredAndOrderedList 后 ， 显 示 的 就 是 过 滤 后 的 数据 。 剩 
余 工 作 只 要 在 视图 中 通过 操作 改变 order 即 可 。 

在 模板 里 加 入 排序 按钮 ， 并 绑 定 相 关 事 件 : 


// list.vue， 部 分 代码 省 略 
«template» 
«div v-show-"list.length"» 
«div class-"list-control"» 
«div class-"list-control-order"» 
«span»HET: </span> 
«span 
class-"list-control-order-item" 
:class-"(on: order === ''Jj" 
@click="handleOrderDefault"> 默 认 </span> 
<span 


class-"list-control-order-item" 


:class-"[on: order === 'sales'j" 
QGclick-"handleOrderSales"- 
销量 


«template v-if-"order === 'sales'"»,«/template» 
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«/span» 


«span 
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class-"list-control-order-item" 


:class-"(on: 


order.indexOf('cost') 


Qclick-"handleOrderCost"» 


价格 
«template v-if-"order 
«template v-if-"order 
«/span» 
«/div» 
«/div» 
«/div» 
«/template» 
«script» 
export default { 
data () { 
return { 


order: '' 


), 
methods: { 
handleOrderDefault () { 
this.order - ; 
), 
handleOrderSales () { 


this.order = 'sales'; 


); 
handleOrderCost () { 


if (this.order 


this.order - 
} else { 


this.order = 


} 
«/script» 
«style scoped» 
.list-control(í 
background: #fff; 
border-radius: 6px; 
margin: lópx; 


padding: 16px; 


'"cost-asc'; 


'cost-desc'; 


> -1)" 


'cost-asc'"»141«/template» 


'cost-desc'"»,«/template» 


'cost-desc') { 
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box-shadow: 0 lpx lpx rgba(0,0,0,.2); 

} 

.list-control-filter( 
margin-bottom: 16px; 

} 

.list-control-filter-item, 

.list-control-order-item { 
cursor: pointer; 
display: inline-block; 
border: lpx solid f$e9eaec; 
border-radius: 4px; 
margin-right: 6px; 
padding: 2px 6px; 

} 

.list-control-filter-item.on, 

.list-control-order-item.on( 
background: 4$f2352e; 
border: lpx solid #f2352e; 
color: SELL; 

} 

«/style» 


“默认 ”和 “销量 ”只 能 单 次 点 击 ，“ 价 格 ” 按 钮 可 以 点 击 切换 为 升序 和 降序 两 种 状态 。 
通过 判断 order 的 状态 ， 给 3 个 按钮 动态 绑 定 了 clas Con) 来 高 亮 显示 当前 排序 的 按钮 。 
刷新 页 面 ， 点 击 切 换 排序 状态 ， 商 品 列表 已 经 可 以 动态 更 新 了 。 


14.2.4 ”列表 按照 品牌 、 颜 色 筛选 


首先 准备 数据 。 
品牌 和 颜色 的 数据 可 以 作为 getters 从 Vuex 的 productList 里 遍历 获取 ， 示 例 代 码 如 下 : 


// main.js， 部 分 代码 省 略 
// 数 组 排 重 
function getFilterArray (array) { 
const res - []; 
const json = {}; 
for (let i = 0; i < array.length; i++){ 
const self = array[i]: 
if(!json[ self])1{ 
res.push( self); 


json[ self] = 1; 


) 


return res; 
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const store = new Vuex.Store(í 
state: { 
productList: [] 


), 
getters: { 


brands: state => { 
const brands = state.productList.map(item => item.brand); 
return getFilterArray (brands); 


), 


colors: state => { 
const colors = state.productList.map(item => item.color); 


return getFilterArray (colors); 


)); 


使 用 map 方法 把 productList 里 的 brand 或 color 数据 过 滤 出 来 ， 然 后 用 getFilterArray 方法 对 
数组 去 重 。 

getters 里 的 brands 和 colors 依赖 数据 productList， 与 计算 属性 原理 类 似 ， 所 以 只 要 维护 好 
productList、brands 和 colors 就 可 以 日 动 更 新 。 

然后 在 listvue 中 把 Vuex 里 的 品牌 和 颜色 数据 引入 ， 并 完成 列表 的 过 滤 : 


// list .vue， 部 分 代码 省 略 
<script> 
export default { 
computed: { 
list () { 
return this.$store.state.productList; 
), 
brands () { 


return this.$store.getters.brands; 


), 


colors () i 


return this.$store.getters.colors; 
b, 
filteredAndOrderedList () { 


let list - [...this.list]; 


// 按 品牌 过 滤 
if (this.filterBrand !== '') { 
list = list.filter (item => item.brand === this.filterBrandg); 


} 
// 按 颜色 过 滤 
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if (this.filterColor !-- '') { 

list = list.filter (item => item.color === this.filterColor); 
} 
// 排序 . . . 


return list; 


), 
data () { 
return { 
filterBrand: '', 


filterColor: '' 


) 


«/script» 


品牌 和 颜色 都 是 单 选 ， 但 是 可 以 协同 过 滤 。 最 后 只 需要 根据 操作 设置 正确 的 filterBrand 和 
filterColor， 商 品 列表 就 可 以 自动 完成 对 品牌 、 颜 色 的 筛选 以 及 价格 、 销 量 的 排序 。 相 关 代 码 如 下 : 


// list.vue， 部 分 代码 如 下 
<template> 
«div v-show-"list.length"» 
«div class-"list-control"» 
«div class-"list-control-filter"» 
<span> 品 牌 : </span> 
«span 
class-"list-control-filter-item" 
:class-"(on: item === filterBrand]" 
v-for-"item in brands" 
Qclick-"handleFilterBrand(item)"»[( item }}</span> 
«/div» 
«div class-"list-control-filter"» 
<span> ği: </span> 
<span 
class-"list-control-filter-item" 
:class-"(on: item === filterColor]" 
v-for-"item in colors" 
Qclick-"handleFilterColor(item)"»[( item }}</span> 
«/div» 
«/div» 
«/div» 
«/template» 
«script» 


export default { 
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methods: ( 
// 筛选 品牌 
handleFilterBrand (brand) { 


// 单 次 点 击 选 中 ， 再 次 点 击 取消 选中 


if (this.filterBrand === brand) { 
this.filterBrand = ''; 
} else { 


this.filterBrand = brand; 


} 
b, 
// 筛选 颜色 
handleFilterColor (color) { 
if (this.filterColor === color) { 
this.filterColor = ''; 


) eise { 
this.filterColor = color; 


} 
} 
«/script» 
思考 : Vuex 的 getters 和 组 件 内 的 computed 很 相似 ， 其 实 把 示例 中 的 brands 和 colors 写 在 
list.vue 的 computed 中 也 是 可 以 的 ， 那 么 到 底 什 么 时 候 把 数据 存在 Vuex 恰当 ， 而 什么 时 候 在 组 件 
内 维护 好 呢 ? 如 果 在 业务 中 比较 纠结 ， 可 以 结合 以 下 几 点 综合 考虑 : 


如 果 数 据 还 有 其 他 组 件 复 用 ， 建 议 放 在 Vuex。 

如 果 需 要 跨 多 级 组 件 传阅 数据 ， 建 议 放 在 Vuex。 

需要 持久 化 的 数据 ( 如 登录 后 用 户 的 信息 ) ， 建 议 放 在 Vuex。 

跟 当 前 业务 组 件 强 相 关 的 数据 (如 示例 中 的 filterBrand、filterColor， 它 们 只 在 当前 组 件 有 
用 ) ， 可 以 放 在 组 件 内 。 


14.3 ”商品 详情 页 


在 views 目录 下 新 建 product.vue 文件 ， 并 在 router.js 中 添加 商品 详情 的 路 由 配置 : 
// router .js， 部 分 代码 省 略 


const routers - [ 


{ 
path: '/product/:id', 


meta: { 
title: ' 商 品 详情 ' 
b, 
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component: (resolve) => require(['./views/product.vue'], resolve) 


商品 详情 的 路 由 接收 一 个 参数 id， 即 商品 的 这 。 常 见 的 业务 场景 中 ， 会 以 id 作为 接口 的 索引 ， 
得 询 出 所 有 相关 的 数据 。 为 了 使 业务 更 好 地 解 灰 ， 从 商品 列表 页 跳 转 至 详情 页 时 ， 只 传递 一 个 商品 
的 id, 不 需要 其 他 任何 数据 (虽然 像 商 品名 称 、 价 格 等 数据 在 详情 页 已 拿 到 , 但 不 传递 , 重新 获取 ) 。 

通过 $route 可 以 获取 当前 路 由 的 参数 ， 并 在 页 面 初始 化 时 请 求 该 商品 的 数据 ， 示 例 使 用 
setTimeout 来 模拟 异步 ， 真 实 场 景 下 应 该 通过 Ajax 来 请 求 数据 。 我 们 从 数据 源 (product.js〉 里 通 
过 数组 的 find0 方 法 拿 到 指定 id 的 数据 ， 完 成 数据 mock. 


// views/product .vue， 部 分 代码 省 略 


<script> 
// 导入 本 地 数据 做 匹配 用 ， 真 实 场 景 并 不 需要 
import product data from '../product.js'; 


export default { 
data () { 
return { 
// 获取 路 由 中 的 参数 
id: parseInt(this.S$route.params.id), 


product: null 


}， 
methods: { 
getProduct () { 
// 真实 环境 通过 Ajax 获取 ， 这 里 用 异步 模拟 
setTimeout(() => { 
this.product = product data 
-find (item => item.id === this.id); 
), 500); 
} 
), 
mounted () { 
// 初始 化 时 ， 请 求 数据 
this.getProduct (); 
} 
} 


«/script» 
ES 6 语法 提示 : 


d — 数组 的 find0 方 法 返回 数组 中 满足 提供 的 测试 函数 的 第 一 个 元 素 的 值 , 示例 是 将 其 与 箭 
提 S KAKAA. 
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然后 将 数据 写 入 模板 即 可 。 需 要 注意 的 是 ， 电 商 网 站 的 详情 页 一 般 为 日 定义 的 文本 和 图 片 ， 
商家 通过 晤 文本 编辑 锅 以 可 视 化 的 形式 编辑 好 商品 内 容 ， 接 口 返 回 的 是 html 片段 ， 可 以 直接 用 
v-html 指令 泻 染 html 内 容 ， 但 在 服务 端 要 对 提交 的 html 做 处 理 ， 避 人 免 发 生 XSS 攻击 。 本 实例 将 
10 张 产 品 的 图 片 依 次 展示 作为 商品 的 内 容 。 其 代码 如 下 : 


// views/product .vue， 部 分 代码 省 略 
<template> 
«div v-if-"product"» 
«div class="product"> 
«div class-"product-image"» 
«img :src-"product.image"» 
«/div» 
«div class-"product-info"» 
«hl class-"product-name"»(( product.name }}</h1> 
«div class-"product-cost"»€X (( product.cost }}</div> 
«div class-"product-add-cart" 
@click="handleAddToCart"> 加 入 购物 车 </div> 
</div> 
</div> 
«div class-"product-desc"» 
<h2> 产 品 介绍 </h2> 
«img v-for-"n in 10" 
:src-"'http://ordfm6aah.bkt.clouddn.com/shop/' + n + 
'.jpeg'"> 
</div> 
</div> 
</template> 
<script> 
export default { 
methods: { 
// 加 入 购物 车 
handleAddToCart () { 
this.$store.commit('addCart', this.id); 


} 
</script> 
<style scoped> 
.product{ 
margin: 32px; 
padding: 32px; 
background: #fff; 
border: lpx solid #dddeel; 
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border-radius: 10px; 
overflow: hidden; 

} 

.-product-image{ 
width: 50%; 
height: 550px; 
float: left; 
text-align: center; 

} 

.-product-image img{ 
height: 100%; 

) 

-product-info(í 
width: 50$; 
padding: 150px 0 250px; 
height: 150px; 
float: left; 
text-align: center; 

} 

-product-cost|í( 
color: 4f2352e; 
margin: 8px 0; 

) 

-product-add-cart í( 
display: inline-block; 
padding: 8px 64px; 
margin: 8px 0; 
background: #2d8cf0; 
color: FELI; 
border-radius: 4px; 
cursor: pointer; 

} 

-product-desc( 
background: fs fff; 
margin: 32px; 
padding: 32px; 
border: lpx solid f$dddeel; 
border-radius: 10px; 
text-align: center; 

} 

.product-desc imgí( 
display: block; 
width: 50$; 
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margin: 32px auto; 
padding: 32px; 
border-bottom: lpx solid $dddeel; 


} 
«/style» 


加 入 购物 车 的 功能 与 列表 页 相同 ， 将 在 下 一 节 重 点 介绍 。 最 后 泻 染 的 效果 如 图 14-3 所 示 。 


电 商 网 站 示例 


AirPods 


Y 1288 


加 入 购物 车 





14-3 商品 详情 页 部 分 效果 


14.4 购物 车 


最 后 也 是 购物 最 重要 的 一 个 环节 ， 就 是 在 购物 车 完成 结算 ， 购 物 车 的 效果 如 图 14-4 所 示 。 
电 商 网 站 示例 
购物 清单 
商品 信息 


AirPods 


BeatsX 入 耳 式 耳机 





` 
ag Beats Solo3 Wireless ARREA 


使 用 优惠 码 : ”vuejs 


应 付 总 额 半 5452 


共计 4 件 商品 (优惠 闻 500) 





14-4 购物 车 
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在 购物 车 中 ， 每 件 商 品 最 少 要 选 1 件 ， 不 过 可 以 删除 ， 每 件 商品 会 有 价格 小 计 (单价 乘 以 数 
量 ) 。 可 以 使 用 优惠 码 , 使 用 后 在 总 价 的 基础 上 减少 500 元 , 总 价 会 根据 购买 商品 的 数量 动态 计算 。 
右上 角 的 购物 车 入 口 也 会 显示 当前 购物 车 商品 的 数量 。 


14.4.1 准备 数据 


之 前 已 经 提 到 过 ， 将 商品 加 入 购物 车 是 通过 Vues 来 完成 的 。 在 main.js 中 ， 先 来 定义 Vuex 中 
的 state 和 mnutations: 


// main.js， 部 分 代码 省 略 
const store = new Vuex.Store(í 
state: { 
productList: [], 
cartbasts T] 
), 
mutations: { 
// 添 加 到 购物 车 
addCart (state, id) { 
// 先 判断 购物 车 是 否 已 有 ， 如 果 有 ， 数 量 +1 
const isAdded = state.cartList.find(item => item.id --- id); 
if (isAdded) { 
isAdded.count ++; 
) eise { 
state.cartList.push(í 
id: id, 
count: 1 


}) 


)]): 


数据 cartList 中 保存 购物 车 记录 ， 数 据 格 式 为 数组 ， 每 项 是 对 象 , 包含 商品 dd 和 购买 数量 两 个 
数据 (遵循 解 耦 , 其 余 信 息 通 过 id 间接 获取 )。addCart 方 法 接收 参数 为 商品 id, 添加 前 先 判断 cartList 
中 是 否 已 存在 商品 ， 存 在 则 数量 加 1， 不 存在 则 写 入 。 

有 了 购物 车 数据 ， 剩 余 工 作 就 是 把 数据 显示 出 来 ， 并 动态 修改 数据 。 在 app.vue 中 定义 购物 车 
入 口 和 已 添加 数量 : 


// app.vue 
«template» 
«div» 
«div class-"header"» 
«router-link 
to-"/list" 
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class="header-title"> 电 商 网 站 示例 </router-link> 
«div class="header-menu"> 
«router-link to-"/cart" class-"header-menu-cart"» 
购物 车 
«span v-if-"cartList.length"»[(( cartList.length }}</span> 
«/router-link» 
«/div» 
«/div» 
«router-view»c«/router-view» 
«/div» 
«/template» 
«script» 
export default { 
computed: { 
cartList () ( 


return this.$store.state.cartList; 


} 


ecfscript- 


在 views 目录 中 新 建 cartvue 文件 ， 并 添加 购物 车 路 由 : 
// router .js， 部 分 代码 省 略 


const routers - [ 


{ 
path: '/cart', 


meta: { 
title: ' 购 物 车 " 
}, 
component: (resolve) => require(['./views/cart.vue'], resolve) 


]; 
cart.vue 中 ， 可 以 先 准备 好 以 下 动态 数据 : 


Vuex 中 的 购物 车 数据 cartList。 

product.js 中 所 有 的 商品 数据 (mock 用) 。 

将 product.js 中 的 数组 转换 为 字典 productDictList， 方 便 快 速 选 取 。 
商品 总 数 countAll. 

总 费用 (不 含 优惠 码 ) costAll。 


// cart .vue， 部 分 代码 省 略 


<script> 


import product data from '../product.js'; 
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export default { 
computed: { 
cartList () { 
return this.$store.state.cartList; 
b, 
productDictList () { 
const dict = (); 
this.productList.forEach(item => { 
dict[item.id] = item; 
)); 
return dict; 
} ， 
countAll () { 
let count - 0; 
this.cartList.forEach(item => { 
count += item.count; 
)); 
return count; 
), 
costAll () { 
let cost = 0; 
this.cartList.forEach(item => { 
cost += this.productDictList[item.id].cost * item.count; 
)); 


return cost; 


}, 
data () { 
return { 


productList: product data 


} 
«/script» 
这 些 数 据 都 使 用 了 计算 属性 ， 因 为 彼此 互相 依赖 。 
productDictList 是 对 象 ，key 是 商品 id, value 是 商品 信息 ， 数 据 即 为 product.js 中 每 项 的 内 容 ， 
通过 id 可 以 快速 便捷 地 获取 对 应 商品 信息 。 


14.4.2 ”显示 和 操作 数据 


在 下 单 前 ， 可 以 对 每 个 商品 的 数量 进行 加 减 ， 或 者 删除 商品 。 先 将 购物 车 数据 cartList 循环 泻 
染 ， 并 完成 表格 的 样式 。 
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// cart.vue， 部 分 代码 省 略 
«template» 
«div class-"cart"» 
«div class-"cart-header"» 
«div class="cart-header-title"> 购 物 清单 </div> 
«div class-"cart-header-main"-» 
«div class="cart-info"> 商 品 信 息 </div> 
«div class="cart-price"> 单 价 </div> 
<div class="cart-count"> 数 量 </div> 
«div class="cart-cost"> 小 计 </div> 
«div class="cart-delete"> 删 除 </div> 
«/div» 
«/div» 
«div class-"cart-content"-» 
«div class-"cart-content-main" v-for-"(item, index) in cartList"» 
«div class-"cart-info"» 
«img :src-"productDictList[item.id].image"» 
«span»(( productDictList[item.id].name }}</span> 
«/div» 
«div class-"cart-price"» 
XY {{ productDictList[item.id].cost }} 
«/div» 
«div class-"cart-count"» 
«span 
Cclass-"cart-control-minus" 
Qclick-"handleCount (index, -1)"»-«/span» 
{{ item.count }} 
<span 
class="cart-control-add" 
@click="handleCount (index, 1)">+</span> 
</div> 
<div class="cart-cost"> 
¥ {{ productDictList[item.id].cost * item.count }} 
</div> 
<div class="cart-delete"> 
<span 
class="cart-control-delete" 
@click="handleDelete (index) "> 删除 </span> 
</div> 
</div> 
«div class-"cart-empty" v-if="lcartList.length"> 购 物 车 为 空 </dqiv> 
«/div» 
«/div» 
«/template» 
«script» 


318 第 3 篇 ”实战 篇 


export default { 
methods: { 
handleCount (index, count) { 
if (count < 0 && this.cartList[index].count --- 1) return; 
this.$store.commit('editCartCount', { 
id: this.cartList[index].id, 
count: count 
)); 
), 
handleDelete (index) { 


this.$store.commit('deleteCart', this.cartList[index].id); 


} 
«/script» 
«style scoped» 

.cart(í( 
margin: 32px; 
background: #fff; 
border: lpx solid f$dddeel; 
border-radius: 10px; 

} 

.cart-header-title{ 
padding: 16px 32px; 
border-bottom: lpx solid #dddeel; 
border-radius: 10px 10px 0 0; 
background: #f8f8f9; 

} 

.cart-header-main{ 
padding: 8px 32px; 
overflow: hidden; 
border-bottom: lpx solid #dddeel; 
background: #eee; 
overflow: hidden; 

} 

.cart-empty{ 
text-align: center; 
padding: 32px; 

} 

.cart-header-main div{ 
text-align: center; 
float: left; 
font-size: 14px; 

} 


div.cart-info( 
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width: 60$; 
text-align: left; 

} 

.cart-price[l( 
width: 10$; 

} 

.Cart-counti 
width: 10$; 

} 

-cart-cost(í( 
width: 10$; 

} 

.cart-delete { 
width: 10$; 

} 

.cart-content-main(í 
padding: 0 32px; 
height: 60px; 
line-height: 60px; 
text-align: center; 
border-bottom: lpx dashed f$e9eaec; 
overflow: hidden; 

} 

-cart-content-main divt 
float: left; 

} 

.-cart-content-main img{ 
width: 40px; 
height: 40px; 
position: relative; 
top: LODZ? 

} 

.cart-control-minus, 

.cart-control-add{ 
display: inline-block; 
margin: 0 4px; 
width: 24px; 
height: 24px; 
line-height: 22px; 
text-align: center; 
background: f$f8f8f9; 
border-radius: 50$; 
box-shadow: 0 lpx lpx rgba(0,0,0,.2); 


cursor: pointer; 
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.cart-control-delete( 
cursor: pointer; 
color: 42d8cf0; 

} 

</style> 


handleCount 方法 用 于 修改 购物 车 商品 数量 ， 最 小 为 1; handleDelete 方法 用 于 删除 商品 。 两 者 
都 根据 接收 的 参数 index (循环 cartList 中 的 索引 ) ， 并 从 数据 cartList 中 获取 具体 商品 信息 。 只 传 
入 index， 而 不 是 具体 数据 (比如 id) 的 好 处 是 更 灵活 、 便 于 扩展 ， 如 果 需 求 有 所 改变 ， 就 需要 修 
改 handleCount 里 的 逻辑 ， 不 需要 维护 模板 部 分 。 

这 两 个 方法 都 交 给 了 Vuex 中 的 mutations 来 操作 数据 : 


// main.js， 部 分 代码 省 略 
const store = new Vuex.Store(í 
state: { 
cartList: [] 
} ， 


mutations: { 
// 修 改 商品 数量 
editCartCount (state, payload) { 
const product = state.cartList.find(item => item.id === 
payload.id); 
product.count += payload.count; 
), 
// 删除 商品 
deleteCart (state, id) { 


const index = state.cartList.findlIndex(item => item.id === id); 


state.cartList.splice(index, 1); 


ES 6 语法 提示 : 
4 数组 的 findIndex() 方 法 返回 数组 中 满足 提供 的 测试 函数 的 第 一 个 元 素 的 索引 ， 示 例 是 
ET 。 将 其 与 箭头 函数 连用 。 


思考 : 修改 购物 车 数量 时 ， 判 断 是 否 只 有 1 件 的 逻辑 是 写 在 handleCount 方法 内 的 ， 而 不 是 在 
Vuex 的 editCarCount 中 。 但 事实 上 ， 写 在 Vuex 里 也 是 可 以 的 ， 但 不 建议 这 样 写 ， 因 为 Vuex 主要 
以 操作 数据 为 主 ， 不 应 该 关心 具体 的 业务 逻辑 ， 业 务 逻 辑 应 该 在 业务 组 件 中 维护 。 

14.4.3 ”使 用 优惠 码 


使 用 优惠 码 可 以 在 总 价 的 基础 上 减少 指定 的 费用 。 验 证 优惠 码 的 过 程 在 真实 场景 也 是 通过 
Ajax 完成 的 ， 这 里 仍然 在 本 地 模拟 。 
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优惠 码 功能 使 用 到 两 个 数据 : promotionCode 和 promotion， 前 者 用 于 双向 绑 定 输入 框 数 据 ， 
后 者 是 优惠 金额 。 其 代码 如 下 : 


// cart .vue， 部 分 代码 省 略 
<template> 
«div class-"cart"» 
«div class-"cart-promotion" v-show-"cartList.length"» 
<span> 使 用 优惠 码 : «/span» 
«input type="text" v-model-"promotionCode"-» 
«span 
class-"cart-control-promotion" 
Qclick="handleCheckCode"> 验 证 </span> 
</div> 
«div class-"cart-footer" v-show-"cartList.length"» 
«div class-"cart-footer-desc"» 
共计 «span»(( countAll }}</span> 件 商品 
«/div» 
«div class-"cart-footer-desc"» 
应 付 总 额 <span>¥ {{ costAll - promotion ))«/span» 
«br» 
«template v-if-"promotion"-» 
(优惠 <span>¥ {{ promotion ))«/span») 
«/template» 
«/div» 
«div class-"cart-footer-desc"» 
«div 
class-"cart-control-order" 
@click="handleOrder"> 现 在 结算 </div> 
</div> 
</div> 
</div> 
</template> 
«script» 
export default { 
data () { 
return { 
promotionCode: '', 


promotion: 0 


}, 
methods: { 


// 验证 优惠 码 ， 我 们 用 Vue .js 代表 正确 的 优惠 码 
handleCheckCode () { 
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if (this.promotionCode === '') { 
window .alert (' 请 输入 优惠 码 ' ) ; 
return; 

} 

if (this.promotionCode !== 'Vue.js') { 
window-alert(' 优 惠 码 验证 失败 ') ; 

} else { 


this.promotion = 500; 


), 
// 通知 Vuex， 完 成 下 单 
handleOrder () { 
this.$store.dispatch('buy').then(() => { 
window.alert(' 购 买 成 功 ');， 
}) 


} 
CIscEIDES 
«style scoped» 
.Cart-promotion([( 
padding: 16px 32px; 
} 
.cart-control-promotion, 
.cart-control-order{ 
display: inline-block; 
padding: 8px 32px; 
border-radius: 6px; 
background: #2d8cf0; 
color: FETT; 
cursor: pointer; 

} 
.cart-control-promotion{ 
padding: 2px 6px; 
font-size: 12px; 
border-radius: 3px; 

} 

.cart-footer{ 
padding: 32px; 
text-align: right; 

} 

.cart-footer-desc{ 


display: inline-block; 
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padding: 0 16px; 

} 

-cart-footer-desc span( 
color: 4$f£2352e; 
font-size: 20px; 

} 

«/style» 


应 付 总 额 是 实际 的 商品 总 价 减 去 优惠 的 价格 ， 因 为 优惠 价 promotion 默认 是 0， 可 以 不 再 判断 


是 否 使 用 了 优惠 码 。 
下 单 的 操作 通过 Vuex 的 action 完成 , 下 单 成 功 后 , 清空 购物 车 数据 。 因为 下 单 要 通知 服务 端 ， 


所 以 需要 在 action 内 操作 。 
// main.js, IRBA 


const store = new Vuex.Store({ 
state: { 
cartList: [] 
), 
mutations: { 
// 清空 购物 车 
emptyCart (state) { 


state.cartList - []; 


), 


actions: { 


/ /购买 
buy (context) { 


// 真实 环境 应 通过 Ajax 提交 购买 请 求 后 再 清空 购物 列表 
return new Promise(resolve-» { 
setTimeout(() => { 
context.commit('emptyCart'); 
resolve(); 
), 500) 


)); 


} 
上 
在 action 中 ， 使 用 setTimeout 模拟 异步 ， 并 通过 返回 一 个 Promise 对 象 来 通知 cartvue 的 
handleOrder 购物 完成 。 关 于 在 action 中 Promise 的 用 法 , 可 以 回顾 11.2.3 小 节 Vuex 的 高 级 用 法 内 容 。 
至 此 ， 本 实战 项 目的 所 有 功能 已 介绍 完毕 。 
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14.5 总 zu 


本 章 所 有 的 代码 己 上 传 至 GitHub， 访 问 下 面 的 链接 可 以 碍 看 到 并 直接 使 用 : 
https://github.com/icarusion/vue-book 


vue-book 下 的 shopping 目录 就 是 本 章 的 代码 ， 在 该 目录 下 执行 nbpm install 命令 会 自动 安装 所 
有 的 依赖 ， 然 后 执行 npm run dev 启动 webpack 服务 。 

在 大 中 型 项 目 中 ， 尤 其 是 多 人 协同 开发 时 ， 最 重要 的 是 模块 解 厢 。 对 于 公共 组 件 ， 要 定义 好 
API (props. events, slots) ， 公 用 数据 要 在 Vuex 或 bus 中 统一 维护 。 在 业务 中 ， 要 尽 可 能 避免 直 
接 操作 父 链 和 子 链 来 修改 组 件 的 状态 ， 对 于 跨 级 通信 最 好 通过 Vuex 或 bus 完成 。 

在 协同 开发 时 ， 可 以 将 路 由 组 件 的 内 容 拆 分 为 多 个 组 件 ， 由 不 同 的 人 维护 ， 这 样 可 以 避免 冲 
突 ， 使 模块 更 清晰 ， 寻 找 bug 也 更 有 针对 性 。 公 共 配 置 还 可 以 使 用 混合 Gnixins) 。 

当 项 目 中 页 面 较 多 , 在 使 用 Vuex 时 可 以 将 store 分 发 到 不 同 的 文件 或 文件 夹 内 ,并 参照 11.2.3 
小 节 Vuex 的 高 级 用 法 , 使 用 modules 把 store 分 割 到 不 同 的 模板 ,这 样 对 于 复杂 的 应 用 更 具 维 护 性 。 


练习 1: 将 品牌 和 颜色 的 筛选 扩展 为 支持 多 选 ， 比 如 支持 同时 选择 白色 和 红色 。 
练习 2: 购物 车 数据 支持 持久 化 〈 本 地 保存 ， 重 新 打开 页 面 仍 然 有 记录 ) 。 
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本 章 将 介绍 一 些 实际 开发 中 经 常 使 用 的 与 Vuejs 相关 的 开源 项 目 ， 它 们 包括 服务 端 泻 染 框架 
Nuxtjs. HTTP 库 axios 以 及 多 语言 插件 vue-il8n。 使 用 好 的 开源 项 目 可 以 让 你 的 团队 事半功倍 。 


15.1 服务 端 泻 染 与 Nuxt.js 


15.1.1 是 否 需 要 服务 端 泻 染 


Vue.js 2 是 文 持 服务 端 泻 染 的 ， 不 过 在 使 用 前 有 必要 先 了 解 你 的 业务 场景 和 服务 端 泻 染 的 特 
点 ， 然 后 权衡 是 否 真 的 需要 服务 端 泻 染 。 

HRS idus CSSR) 并 不 是 什么 新 鲜 技 术 ， 从 互联 网 开始 人 至今， 大 部 分 网 站 的 内 容 仍 然 是 由 服 
务 端 泻 染 的 ， 然 后 返回 到 客户 端 。 如 何 碍 看 一 个 网 站 是 否 是 SSR E? 很 简单 ， 比 如 打开 一 个 含有 
文章 内 容 的 网 站 ， 碍 看 它 的 源 代 码 ， 看 这 些 文字 是 不 是 都 在 源 代 码 里 面 ， 如 果 是 ， 那 它 就 是 SSR:; 
或 者 通过 Chrome 调试 工具 ， 在 network 面板 查看 有 没有 相关 的 异步 请 求 来 调 取 内 容 。 

很 多 网 站 之 所 以 使 用 SSR， 主 要 目的 是 做 搜索 引擎 优化 (SEO〉。 由 于 所 处 的 国家 和 利益 不 
同 ， 谷 歌 很 早 就 文 持 对 使 用 Ajax 技术 异步 泻 染 内 容 的 网 站 进行 仆 取 ， 它 们 洞 匈 了 这 种 技术 将 会 1 
广泛 利用 , 不 过 谷歌 在 服务 端的 开销 也 要 增加 很 多 ， 因 为 这 依赖 于 一 个 模拟 的 浏览 器 环境 。 白 度 人 至 
今 仍 不 支持 爬 取 动 态 泻 染 内 容 为 主 的 网 站 ， 可 能 是 国内 目前 需 营销 的 网 站 大 多 还 是 静态 内 容 站 吧 。 
因此 ， 是 否 需要 SSR， 最 主要 的 因素 就 是 是 否 需要 SEO， 换 句 话 说， 你 的 产品 是 面向 大 众 用 户 的 ， 
还 是 面向 企业 的 。 如 果 是 面向 企业 ， 那 可 能 只 有 首页 、 信 息 页 和 一 些 营 销 页 面 需要 SEO， 与 主 产 
品 分 离 。 

使 用 SSR 的 第 二 原因 是 ， 客 户 端 的 网 络 可 能 是 不 稳定 的 ， 有 的 地 方 很 快 ， 有 的 地 方 会 很 慢 。 
这 种 情况 下 ， 通 过 SSR 减少 请 求 量 和 客户 端 泻 染 可 以 相对 快速 地 看 到 内 容 。 
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SSR 听 起 来 很 不 错 ， 使 用 它 也 是 有 前 提 的 ， 那 就 是 你 的 团队 需要 懂 Node.js 的 小 伙伴 。Vue.js 
的 后 端 泻 染 不 同 于 PHP 的 模板 或 JSP 等 网 站 ， 你 的 产品 可 能 还 是 由 PHP. Java 等 后 端 来 提供 数据 
O, Node.js 在 这 里 只 负责 渲染 ， 也 就 是 中 间 层 (大 前 端 ) 。 如 果 你 的 团队 有 具备 了 这 些 技术 能 
产品 也 有 SSR 的 场景 ， 那 就 可 以 尽情 地 使 用 Vuejjs 的 SSR. 


15.1.2. Nuxt.js 


项 目地 址 : https://github.com/nuxt/nuxt.js。 

Nuxt.js 是 一 个 基于 Vuejs 的 通用 应 用 框架 ， 73 Node.js 做 Vue 的 服务 端 泻 染 提 供 了 各 种 配置 。 
使 用 Nuxtjs， 你 可 以 轻松 、 人 快速 地 搭建 一 套 SSR 框架 ， 省 去 了 大 量 配 置 的 工作 。 

为 了 快速 体验 Nuxtjs， 可 以 下 载 安 装 starter 模板 (https://github.com/nuxt/starter/archive/ 
source.zip) 。 下 载 后 ， 通 过 npm install 安装 依赖 ， 再 通过 npm run dev 启动 项 目 ， 在 浏览 器 访问 
127.0.0.1:3000 即 可 预览 ， 如 图 15-1 所 示 。 


NUXI 


Universal Vue.|s Application 


Documentation | | Github | 








15-1 Nuxtjs 项 目 


与 普通 Vuejjs 项 目 不 同 的 是 ，Nuxtjs 构建 的 代码 ，UI 是 在 服务 端 演 染 的 ， 而 非 在 客户 端 。 通 
过 webpack 创建 的 SPA 项 目 ， 查 看 其 源 代码 ，<body> 内 一 般 只 有 一 个 <div> 元 素 作为 根 实例 挂 载 
节点 ， 其 他 都 由 JavaScript 来 泻 染 。 而 查看 Nuxtjs 构建 后 的 源 代码 ， 所 有 模板 内 容 直 接 泻 染 在 
其 中 。 

使 用 Nuxt.js 基本 与 写 .vue 单 文 件 一 致 ， 可 到 项 目下 的 pages 内 查看 首页 文件 indexvue. 8€ 
Nuxt.js 详细 的 用 法 和 Vue.js 的 SSR 可 以 阅读 官方 文档 。 


Vue.js 服务 端 泻 染 (CSSR) 文档 : https://ssr.vuejs.org/ 
Nuxt.jjs 文档 : https://nuxtjs.org/ 
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15.2 HTTP 库 axios 


项 目地 址 : https://github.com/mzabriskie/axios. 

axios 是 一 个 基于 Promise, FJR AFAI sim Node.js I] HTTP PE, 75H] Ajax 请 求 。 

Vue.js 不 像 jQuery 或 AngularJS, 本 身 并 没有 携带 Ajax 方法 ,因此 需要 借助 插件 或 第 三 方 HTTP 
库 ， 而 axios 就 是 一 个 很 不 错 的 选择 。 

可 以 通过 NPM 或 CDN 的 形式 来 使 用 axios， 以 NPM 为 例 ， 先 进行 安装 : 


npm install axios --save 
axios 提供 了 多 种 请 求 方式 ， 比 如 直接 发 起 GET 或 POST 请 求 : 


axios.get('/user?ID-12345') 
.then(function (response) { 
console.log(response); 
)) 
.catch(function (error) { 
console.log(error); 


)); 


axios.post('/user', { 

firstName: 'Fred', 
lastName: 'Flintstone' 

)) 

.then (function (response) { 
console.log (response); 

)) 

.catch (function (error) { 
console.log (error); 


)); 
基于 Promise， 可 以 执行 多 个 并 发 请 求 : 


function getUserAccount() { 


return axios.get('/user/12345'); 


function getUserPermissions() { 


return axios.get('/user/12345/permissions'); 
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axios.all([getUserAccount(), getUserPermissions()]) 
.then(axios.spread(function (acct, perms) { 
// 请 求 都 完成 时 . . 
))); 


也 可 以 通过 写 入 配置 的 形式 发 起 请 求 : 


axios(í 
method: 'post', 
url: '/user/12345'!, 
data: { 
firstName: 'Fred', 


lastName: 'Flintstone' 


)) 


.then(function (res) { 
console.log(res); 


)); 
在 业务 中 ， 经 常 将 其 封装 为 实例 的 形式 调用 ， 便 于 做 通用 配置 ， 例 如 : 


// util.js 
const instance = axios.create(í 
baseURL: 'https://some-domain.com/api', 
timeout: 1000, 
headers: ('Content-Type': 'application/x-www-form-urlencoded;') 


)); 
export default instance; 


// index.vue 
«template» 
«div»«/div» 
«/template» 
<script> 
import Ajax from './util.js'; 
export default { 
mounted () { 
Ajax ({ 
method: 'post', 
url: '/user', 
data: { 
firstName: 'Fred', 


lastName: 'Flintstone' 
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}) .then(res => { 
console.log(res); 


} ) 7 


} 


«/script» 


更 多 关于 axios 的 配置 ， 可 到 GitHub J9i H 3E 91 [s] ie d: xc RA. 
15.3 ”多 语言 插件 vue-i18n 


项 目地 址 : https://github.com/kazupon/vue-il8n。 

vue-il8n 是 一 个 Vue.js 插件 ， 提 供 了 多 语言 解决 方案 。 如 果 你 的 项 目 有 多 国语 言 的 需求 ， 可 以 
使 用 它 很 快速 地 实现 。 

通过 NPM 来 安装 : 


npm install vue-il8n --save 


然后 在 webpack 入 口 文件 中 使 用 插件 : 


// main.js 
import Vue from 'vue'; 


import Vuell8n from 'vue-il8n'; 


Vue.use (VueIl8n); 


使 用 vue-il8n 插件 需要 在 入 口 文件 中 进行 多 语言 包 的 配置 ， 其 实 是 一 个 对 象 ， 每 种 语言 对 应 
于 一 个 key: 


// main.js È LERE 
FP 
const messages = { 
en: ( 
message: I 


hello: 'hello world' 


message: { 


hello: ' 你 好 ， 世 界 ' 
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const il8n = new VueIll8n(( 
locale: 'en', // 设置 当前 语言 
messages, // 设置 语言 包 

} ) 


new Vue({ 
el: '#app', 
router: router, 
aiBn:il8n, 
render: h => h(App) 
)); 


配置 好 多 语言 后 ， 在 业务 组 件 中 就 可 以 直接 使 用 了 ， 例 如 : 


// index.vue 
«template» 
«div class-"index"» 
<p>{{ $t("message.hello") }}</p> 
«/div» 


«/template» 

<p> 元 素 的 内 容 会 根据 当前 传 入 的 语言 自动 奉 换 语言 包 对 应 message.hello 的 内 容 。 

更 多 关于 vue-il8n 的 配置 和 说 明 可 以 查阅 其 文档 ，vue-il8n 分 6.x 和 5.x 两 个 版 本 ， 使 用 会 稍 
有 不 同 ， 上 面 介绍 的 是 Ox 版 本 。 

6x 文档 : http://kazupon.github.io/vue-il8n/en/started.html。 

5x X: https://kazupon.github.io/vue-il 8n/old/. 


